使用javascript创建嵌入在表单中的元素

Question

我以class ='myclass'的形式输入文本

我想创建一个使用此元素的javascript，并在与上一个输入相同的空间中，在输入旁边添加一个带有链接的按钮

我正在尝试这个

var createLink = function() {
    var wrapper = document.createElement('div');
    var nameInput = document.getElementsByClassName("input-class");
    var btn = document.createElement("button");
    btn.innerHTML = '<a href="https://stackoverflow.com">StackOverflow</a>';

    serieInput.parentNode.replaceChild(wrapper,serieInput);

    wrapper.appendChild(serieInput);
    wrapper.appendChild(btn);
};

但我无法捕获父节点。

预先感谢您的帮助。

Answer 1

我假设serieInput和nameInput在您的代码中应该相同吗？

如果用包装器替换输入，它将不再存在以附加到包装器中。

您可以做的是：

1. 获取输入的当前父级和下一个同级。
2. 将输入追加到包装器，包装器会将输入移出其当前父级。
3. 将按钮附加到包装器上。
4. 如果原始输入具有同级，则在此之前附加包装器。如果没有添加，请附加到父项的末尾。

例如

var createLink = function() {
  var wrapper = document.createElement('div');
  var nameInput = document.getElementsByClassName("input-class")[0];
  var btn = document.createElement("button");
  btn.innerHTML = '<a href="https://stackoverflow.com">StackOverflow</a>';

  var parent = nameInput.parentNode;
  var next = nameInput.nextSibling;
  
  wrapper.appendChild(nameInput);
  wrapper.appendChild(btn);

  if (next) {
    parent.insertBefore(wrapper, next);
  } else {
    parent.appendChild(wrapper);
  }
};

createLink();

<div>
<input class="input-class">
</div>