我们与rlemon进行了很长的关于DOM操作的聊天here。基本上,问题是'How can I change the UL-LI DOM with Javascript?'
例如,假设我要显示类似"<ul id='uids'><li>1</li><li>2</li></ul>"
的内容而不是"<ul><li><i>Hello 1, have a nice day!</i></li>...</ul>"
-仅凭DOM操作如何做到这一点?
我知道这是一个简单的问题,因此我对参考资料感到满意,而不是费力地将其改写。
关于DOM操作的简单演示,您可以做这样的事情吗?
输入项
<ul id="uid">
<li>1</li>
<li>2</li>
</ul>
输出量
<ul id="uid">
<li>Hello beautful lady 1!</li>
<li>Hej gentleman 2.</li>
</ul>
可能对其他新手熟悉JS的功能特性很有用
http://chat.stackoverflow.com/rooms/17/conversation/learn-javascript-videos
http://ejohn.org/apps/learn/
最佳答案
使用innerHTML的简短方法:
var lis = document.getElementById("uid").getElementsByTagName("li");
for(var i = 0; i < lis.length; i++)
lis[i].innerHTML = "<i>Hello "+lis[i].innerHTML+", have a nice day!</i>";
jsFidlde:http://jsfiddle.net/eZv4D/3/
从长远来看,使用真正的DOM操作:
var lis = document.getElementById("uid").getElementsByTagName("li");
for(var i = 0; i < lis.length; i++) { // Loop through all <li> elements
// Create an <i> element to contain the text
var el = document.createElement("i");
// Add the start of the text to the <i>
el.appendChild(document.createTextNode("Hello "));
// Add everything in the <li> to the <i> (they are removed from the <li>)
while(lis[i].firstChild)
el.appendChild(lis[i].firstChild);
// Add the end of the text to the <li>
el.appendChild(document.createTextNode(", have a nice day!"));
// Add the <i> to the <li>
lis[i].appendChild(el);
}
jsFiddle:http://jsfiddle.net/eZv4D/2/
关于javascript - 如何使用Javascript在UL-LI块中进行简单的DOM操作?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/10922763/