javascript - 如何使用 JavaScript 获取元素的 HTML？

Question

我想获取我想要的元素的确切 HTML

就像我有这个:

<div class="input">
  <input type="number" id="nanometer" autocomplete="off" class="field" placeholder="nm" oninput="exchange()">
</div>

我想在我的 JavaScript 中获取准确的 HTML 代码:

var nano = document.getElementById("nano")

现在我期望 nano 是:

<input type="number" id="nano" autocomplete="off" class="field" placeholder="nm" oninput="exchange()">

对于我的工作，我必须让它像这样复制自身:

<input type="number" id="nano" autocomplete="off" class="field" placeholder="nm" oninput="exchange()">
<input type="number" id="nano" autocomplete="off" class="field" placeholder="nm" oninput="exchange()">

通过这段代码:

document.getElementById(nano).outerHTML += nano

但它不会工作

Answer 1

虽然问题是使用 HTML 字符串进行克隆，但最好不要使用 HTML 字符串，而是使用 DOM 元素。这些是浏览器内部使用的对象。

使用 DOM 元素可以更更容易地控制结果，尤其是。如果您需要对新项目进行更改 - 例如为其指定一个新的 id，这是强制性的，因为每个 id 每个页面都应该是唯一的。

这是一个例子:

var nano = document.getElementById("nano");
var parent = nano.parentNode;

var clone = nano.cloneNode(true);
clone.id = "newNano";
clone.setAttribute("value", 123);

parent.insertBefore(clone, nano.nextSibling);

<input type="number" id="nano" autocomplete="off" class="field" placeholder="nm" oninput="exchange()">