我们与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/

10-12 12:31
查看更多