我们在这里与 rlemon 就 DOM 操作进行了很长时间的交谈。基本上问题是'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 的功能特性很有用
使用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/
一种方法如下：
var liElems = document.getElementsByTagName('li'),
strings = ['Hello beautiful lady ','Hej gentlemen '];
for (var i = 0, len = liElems.length; i < len; i++){
elem = liElems[i].firstChild,
curText = elem.nodeValue;
if (i%2 == 0){
elem.nodeValue = strings[0] + curText;
}
else {
elem.nodeValue = strings[1] + curText;
}
}
参考：
这是另一种方法：
从...开始：
<ul>
<li>1</li>
<li>2</li>
</ul>
js是..
var demo = {
__elems: false,
replacement: 'This is element __replaceme__',
go: function(){
this.__elems = document.querySelectorAll('li');
for(var i = 0; i < this.__elems.length; i++){
elem = this.__elems[i];
elem.firstChild.nodeValue = this.replacement.replace('__replaceme__',elem.firstChild.nodeValue);
}
}
}
demo.go();
一些重要的事情要记住， DOM 中有一些 nodeTypes，并不是所有的都是你想要的，所以你应该过滤。例如，如果在文本前面有一个注释节点，那么这将无法按您的预期工作。
“不学习是相当困难的。”
我正在使用视频中介绍的工具 JSLint 分析他们的代码，这里大约44.00 点。Billiand 的简单版本具有最少的规范（？）错误。视频中提到了一种叫做 ES3.1 的东西即将到来，无论如何我没有资格说它们现在是对还是错——取决于规格（根据视频，当前是 1999 年的规格）。反正我是倾向于用simple-method，反馈一下分析？
大卫托马斯
'document' was used before it was defined. var liElems = document.getElementsByTagName('li'), line 2 character 40Missing space between ',' and 'Hej gentlemen '. strings = ['Hello beautiful lady ','Hej gentlemen ']; line 4 character 6Move 'var' declarations to the top of the function. for (var i = 0, len = liElems.length; i < len; i++){ line 4 character 6Stopping. (30% scanned).辉煌
简单的
'document' was used before it was defined. var lis = document.getElementById("uid").getElementsByTagName("li"); line 2 character 4Missing space between 'for' and '('. for(var i = 0; i < lis.length; i++) line 2 character 5Move 'var' declarations to the top of the function. for(var i = 0; i < lis.length; i++) line 2 character 5Stopping. (66% scanned).DOM 版本
'document' was used before it was defined. var lis = document.getElementById("uid").getElementsByTagName("li"); line 2 character 4Missing space between 'for' and '('. for(var i = 0; i < lis.length; i++) { // Loop through all <li> elements line 2 character 5Move 'var' declarations to the top of the function. for(var i = 0; i < lis.length; i++) { // Loop through all <li> elements line 2 character 5Stopping. (12% scanned).丹普
Unexpected dangling '_' in '__elems'. __elems: false, line 4 character 17Expected exactly one space between 'function' and '('. go: function(){ line 4 character 19Expected exactly one space between ')' and '{'. go: function(){ line 4 character 19Missing space between ')' and '{'. go: function(){ line 5 character 9Missing 'use strict' statement. this.__elems = document.querySelectorAll('li'); line 5 character 14Unexpected dangling '_' in '__elems'. this.__elems = document.querySelectorAll('li'); line 5 character 24'document' was used before it was defined. this.__elems = document.querySelectorAll('li'); line 6 character 12Missing space between 'for' and '('. for(var i = 0; i < this.__elems.length; i++){ line 6 character 13Move 'var' declarations to the top of the function. for(var i = 0; i < this.__elems.length; i++){ line 6 character 13Stopping. (46% scanned). undefined document 'go' 4柠檬
'document' was used before it was defined. var list = document.getElementById('uids'), // get the parent ul line 3 character 45Expected exactly one space between 'function' and '('. Array.prototype.forEach.call(items, function(item) { // because nodeLists are not arrays we do this for a forEach line 4 character 5Missing 'use strict' statement. var value = item.textContent || item.innerText; // gets the text content cross browser line 5 character 10Expected exactly one space between 'while' and '('. while(item.hasChildNodes()){ // this just removes the contents of the li without innerHTML, and is faster for this amount of data line 5 character 32Expected exactly one space between ')' and '{'. while(item.hasChildNodes()){ // this just removes the contents of the li without innerHTML, and is faster for this amount of data line 5 character 32Missing space between ')' and '{'. while(item.hasChildNodes()){ // this just removes the contents of the li without innerHTML, and is faster for this amount of data undefined document 'items' 3 clear
var list = document.getElementById('uids'), // get the parent ul
items = list.getElementsByTagName('li'); // get the items as a nodeList
Array.prototype.forEach.call(items, function(item) { // because nodeLists are not arrays we do this for a forEach
var value = item.textContent || item.innerText; // gets the text content cross browser
while(item.hasChildNodes()){ // this just removes the contents of the li without innerHTML, and is faster for this amount of data
item.removeChild(item.lastChild);
}
item.appendChild(document.createTextNode("Wuddup " + value)); // append your new message :P
});
这是我的看法，但是如果可能的话，在将列表输出到文档之前在服务器上执行所有这些操作......这样更有意义。
这是一个关于消息生成的演示；）