更改文本并将 HTML 添加到标签内复选框的文本

Question

当输入嵌套在标签标签中时，使用普通的 JS 是否可以更改复选框旁边显示的文本内容？专门为文本添加HTML链接？

我可以毫无问题地更改文本，但是将内容设置为显示 HTML 最终只会将 HTML 呈现到屏幕上。因此，在以下示例中，我希望将条款和条件文本设为链接。

<label for="custom_field">

<input type="checkbox" name="custom_field" id="custom_field" value="I have read the terms and conditions"> I have read the terms and conditions

</label>

我一直在使用节点和兄弟姐妹，虽然我可以更改文本，但有两种情况会发生 - 我要么最终覆盖标签标签之间的所有内容，从而杀死复选框。

或者我的锚标签被渲染到屏幕而不是解释。

任何想法我哪里出错了？

这是我正在尝试的最新代码：

let terms = document.querySelector('#custom_field');

if(terms){

    terms.nextSibling.innerHTML = "I have read and agree to the <a href='#'>terms and conditions</a>";

}

注意：由于我的 CMS 中的限制，我不能直接编辑标签的内容来插入相关的 HTML。所以我需要根据第一个代码块来处理。

Answer 1

innerHTML不起作用，因为terms.nextSibling是一个Text没有innerHTML属性的节点。您需要根据“条款和条件”拆分标签Text节点，然后将该节点移动到链接中：const terms = document.querySelector('#custom_field');if (terms) {&nbsp; const fullText = terms.nextSibling;&nbsp; const link = document.createElement('a');&nbsp; link.href = '#';&nbsp; const tcIndex = fullText.textContent.indexOf('terms and conditions');&nbsp; const termsText = fullText.splitText(tcIndex);&nbsp; // If there's more text after "terms and conditions", you'll need to split again&nbsp; // termsText.splitText('terms and conditions'.length);&nbsp; fullText.parentElement.insertBefore(link, termsText);&nbsp; link.append(termsText);}<label for="custom_field">&nbsp; <input type="checkbox" name="custom_field" id="custom_field" value="I have read the terms and conditions"> I have read the terms and conditions</label>

Answer 2

为什么不添加额外的 HTML 标签？<label for="custom_field">&nbsp; &nbsp; <input type="checkbox" name="custom_field" id="custom_field">&nbsp; &nbsp; // Added Span&nbsp; &nbsp; <span id="result"> I have read the terms and conditions</span></label><script>&nbsp; &nbsp; let terms = document.querySelector('#custom_field');&nbsp; &nbsp; if(terms){&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('result').innerHTML = "I have read and agree to the <a href='#'>terms and conditions</a>";&nbsp; &nbsp; }</script>

Answer 3

我相信这是使用纯 JavaScript 实现它的最基本方法。由于复选框后面有一个文本节点，因此您需要首先找到要替换的文本，然后将其替换为包含在可以包含 HTML 的新节点中的 HTML（现有文本节点不能转换）。let terms = document.querySelector('label');for (var i = 0; i < terms.childNodes.length; i++) {&nbsp; var textNodeTrimmed;&nbsp; if (terms.childNodes[i].nodeType === 3) textNodeTrimmed = terms.childNodes[i].nodeValue.trim()&nbsp; if (textNodeTrimmed.length > 0 && textNodeTrimmed === "I have read the terms and conditions") {&nbsp; &nbsp; var replacementNode = document.createElement('span');&nbsp; &nbsp; replacementNode.innerHTML = "I have read and agree to the <a href='#'>terms and conditions</a>";&nbsp; &nbsp; terms.childNodes[i].parentNode.insertBefore(replacementNode, terms.childNodes[i].nextSibling);&nbsp; &nbsp; terms.childNodes[i].remove();&nbsp; }}<label for="custom_field">&nbsp; <input type="checkbox" name="custom_field" id="custom_field" value="I have read the terms and conditions"> I have read the terms and conditions</label>