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

使用普通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>";
}

let terms=document.querySelector（“#自定义_字段”）；
如果（条款）{
terms.nextSibling.innerHTML=“我已阅读并同意”；
}

---

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

您可以使用

parentnode

然后使用

子项[0].outerHTML

剪切复选框并用新内容再次粘贴，以替换旧文本

新内容可以包括HTML锚或任何其他标记

您可以使用

parentnode

然后使用

子项[0].outerHTML

剪切复选框并用新内容再次粘贴，以替换旧文本

---

新内容可以包括HTML锚或任何其他标记

为什么不添加额外的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>

//附加跨距
我已阅读条款和条件
让terms=document.querySelector（“#自定义_字段”）；
如果（条款）{
document.getElementById（'result'）.innerHTML=“我已阅读并同意”；
}

为什么不添加额外的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>

//附加跨距
我已阅读条款和条件
让terms=document.querySelector（“#自定义_字段”）；
如果（条款）{
document.getElementById（'result'）.innerHTML=“我已阅读并同意”；
}
innerHTML
不起作用，因为
terms.nextSibling
是一个节点，它没有
innerHTML
属性

您需要在“条款和条件”上找到标签的
文本
节点，然后将该节点移动到链接中：


const terms=document.querySelector（“#自定义_字段”）；
如果（条款）{
const fullText=terms.nextSibling；
const link=document.createElement（'a'）；
link.href='#'；
const tcIndex=fullText.textContent.indexOf（“条款和条件”）；
const-termsText=fullText.splitText（tcIndex）；
//如果“条款和条件”后面有更多文本，则需要再次拆分
//termsText.splitText（“条款和条件”。长度）；
fullText.parentElement.insertBefore（link，termsText）；
link.append（termsText）；
}

我已阅读条款和条件
innerHTML
不起作用，因为
terms.nextSibling
是一个节点，它没有
innerHTML
属性

您需要在“条款和条件”上找到标签的
文本
节点，然后将该节点移动到链接中：


const terms=document.querySelector（“#自定义_字段”）；
如果（条款）{
const fullText=terms.nextSibling；
const link=document.createElement（'a'）；
link.href='#'；
const tcIndex=fullText.textContent.indexOf（“条款和条件”）；
const-termsText=fullText.splitText（tcIndex）；
//如果“条款和条件”后面有更多文本，则需要再次拆分
//termsText.splitText（“条款和条件”。长度）；
fullText.parentElement.insertBefore（link，termsText）；
link.append（termsText）；
}

我已阅读条款和条件
我相信这是使用纯JavaScript实现的最基本方法。由于复选框后面有一个文本节点，因此您需要首先找到要替换的文本，然后将其替换为包含HTML的新节点中包装的HTML（现有文本节点无法转换）


let terms=document.querySelector（'label'）；
对于（var i=0；i0&&textNodeTrimmed==“我已阅读条款和条件”）{
var replacementNode=document.createElement（'span'）；
replacementNode.innerHTML=“我已阅读并同意”；
terms.childNodes[i].parentNode.insertBefore（replacementNode，terms.childNodes[i].nextSibling）；
terms.childNodes[i].remove（）；
}
}

我已阅读条款和条件
我相信这是使用纯JavaScript实现的最基本方法。由于复选框后面有一个文本节点，因此您需要首先找到要替换的文本，然后将其替换为包含HTML的新节点中包装的HTML（现有文本节点无法转换）


let terms=document.querySelector（'label'）；
对于（var i=0；i0&&textNodeTrimmed==“我已阅读条款和条件”）{
var replacementNode=document.createElement（'span'）；
replacementNode.innerHTML=“我已阅读并同意”；
terms.childNodes[i].parentNode.insertBefore（replacementNode，terms.childNodes[i].nextSibling）；
terms.childNodes[i].remove（）；
}
}

我已经读过这些条款了