Question

我有一个包含大量输入元素的表单，并没有告诉用户哪些字段是必需的。问题是我无法访问其HTML代码。

所以我写这个JavaScript：

var allInputs = document.querySelectorAll("input");  
var newItem = document.createElement("LI");  
var textnode = document.createTextNode("(*)");  
newItem.appendChild(textnode);  
for (var i = 0; i < allInputs.length; i++) {  
        if(allInputs[i].hasAttribute('required') == true){  
          allInputs[i].parentNode.insertBefore(newItem, allInputs[i]);  
        }  
}

结果：它仅在最后一次输入之前添加（*）。我已经尝试逐行在浏览器控制台上运行此代码，并且我注意到它在输入上添加了文本并删除了上一个。

我不是网络开发者，而且我使用的是我在互联网上找到的示例，所以这对我来说很棘手：/

Answer 1

您只是在循环开始之前创建一个新的li，因此每次insertBefore您从之前的位置移除li并将其放入新的位置。

如果新元素只有一个子节点，并且该子节点是一个文本节点，那么简单地分配给textContent就不那么简单了。

在每次迭代中创建一个新的li：

const allInputs = document.querySelectorAll("input");
for (let i = 0; i < allInputs.length; i++) {  
  if(allInputs[i].hasAttribute('required') == true){  
    const newItem = document.createElement("LI");  
    newItem.textContent = '(*)';
    allInputs[i].parentNode.insertBefore(newItem, allInputs[i]);
  }  
}

Answer 2

您实际上是在每个输入旁边添加元素。但由于您引用相同的newItem，因此只需将元素从一个位置移动到下一个位置，而不是在该位置创建新元素。

使用cloneNode()制作您可以放置在每个位置的元素的新副本。

allInputs[i].parentNode.insertBefore(newItem.cloneNode(true), allInputs[i]);

Answer 3

function addAsterisk(node){ 
    var newItem = document.createElement("LI");  
    var textnode = document.createTextNode("(*)");  
    newItem.appendChild(textnode);
    node.parentNode.insertBefore(newItem, node);
}

var allInputs = document.querySelectorAll("input"); 

for (var i = 0; i < allInputs.length; i++) {  
        if(allInputs[i].hasAttribute('required') == true){
          addAsterisk(allInputs[i]);
        }  
}

Answer 4

我不知道您要在哪里放置标记，但在<li>中添加标记会使标记显示在新行上。

就个人而言，我会在输入的一侧添加标记，如下所示：

＆＃13;

const allInputs = document.querySelectorAll("input[required]");
const addMark = x => x.parentNode.appendChild(document.createTextNode("*"));
[...allInputs].forEach(addMark);

＆＃13;

<ul>
<li><label>First name <input required/></label>
<li><label>Second name <input/></label>
<li><label>Email<input type="email" required/></label>
<li><label>Information <input/></label>
</ul>

＆＃13;

insertBefore在多个元素上只能与最后一个元素一起使用

4 个答案: