更改文本并将 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) {

  const fullText = terms.nextSibling;

  const link = document.createElement('a');

  link.href = '#';

  const tcIndex = fullText.textContent.indexOf('terms and conditions');

  const termsText = fullText.splitText(tcIndex);

  // If there's more text after "terms and conditions", you'll need to split again

  // termsText.splitText('terms and conditions'.length);

  fullText.parentElement.insertBefore(link, termsText);

  link.append(termsText);

}

<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>

Answer 2

为什么不添加额外的 HTML 标签？

<label for="custom_field">

    <input type="checkbox" name="custom_field" id="custom_field">

    // Added Span

    <span id="result"> I have read the terms and conditions</span>

</label>

<script>

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

    if(terms){

        document.getElementById('result').innerHTML = "I have read and agree to the <a href='#'>terms and conditions</a>";

    }

</script>

Answer 3

我相信这是使用纯 JavaScript 实现它的最基本方法。由于复选框后面有一个文本节点，因此您需要首先找到要替换的文本，然后将其替换为包含在可以包含 HTML 的新节点中的 HTML（现有文本节点不能转换）。

let terms = document.querySelector('label');

for (var i = 0; i < terms.childNodes.length; i++) {

  var textNodeTrimmed;

  if (terms.childNodes[i].nodeType === 3) textNodeTrimmed = terms.childNodes[i].nodeValue.trim()

  if (textNodeTrimmed.length > 0 && textNodeTrimmed === "I have read the terms and conditions") {

    var replacementNode = document.createElement('span');

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

    terms.childNodes[i].parentNode.insertBefore(replacementNode, terms.childNodes[i].nextSibling);

    terms.childNodes[i].remove();

  }

}

<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>