Question

我正试图找出一种结合以下陈述的方法

document.getElementById( 'div1' ).appendChild( document.createElement( 'div' ) ).id="div2";
document.getElementById( 'div2' ).appendChild( document.createTextNode( 'More about me' ) );

Answer 1

appendChild()会返回您刚添加的节点的引用，因此第二个getElementById不是必需的：

document.getElementById('div1').appendChild(document.createElement('div'))
.appendChild(document.createTextNode('More about me'))
.parentNode.id="div2"; // only if you need the second div to have id="div2" for some other reason.

Answer 2

免责声明：这根本不是一件好事，我会在一瞬间解释原因。

document.getElementById("div1").innerHTML = document.getElementById("div1").innerHTML + "<div id='div2'>More about me</div>";

这样做可确保新div附加附加，而不是简单地替换现有div的内容。

很明显，这是非常难看的代码。

这很糟糕的原因是因为我们正在做的是插入我们认为或被认为是真实元素的东西。这是错误的 - 我们插入一个字符串，稍后将其转换为元素。这对我们来说简直太不方便了。

使用DOM脚本（以前您实际创建元素并附加它）将元素创建为实际的HTML对象。关键是它只是更多纯输入（并且在大多数情况下，执行速度比innerHTML更快。）

使用innerHTML现在变得越来越普遍了，我想让自己怀疑只是因为我是一个Javascript书呆子，而且从我所学到的（实际上是在这个网站上）， DOM脚本在许多方面都要好得多。

其次，DOM脚本可以比innerHTML更整洁，更易于维护。你可能会说我上面给你的代码根本不方便。 ;）

如何将这两个javascript行合并为一行

2 个答案: