1

我有这段代码，它可以按我的意愿运行。目标是用粗体标签封装元素（“TEST”）. 我只想知道是否有任何单一的内置方法可以通过 html 标签封装元素？类似于 insertAdjacentHTML ，但 insertAdjacentHTML 会自动关闭标签。所以在这种情况下，我不能做 2x insertAdjacentHTML（< b>的afterbegin和 </b> 的 beforeend）。

我可以毫无问题地使用下面的代码，我只是好奇是否有办法封装元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="text" onClick=makebold()>
        TEST
    </div>
    <script>
        function makebold() {
            var text = document.getElementById("text").innerHTML ;
            text = "<b>"+text+"</b>";
            document.getElementById("text").innerHTML = text;
        } 
    </script>

</body>

</html>

4

3 回答 3

1

您可以使用document.createElement创建一个<b>，将其附加到父级，并将父级最初存在的子级附加到它。

function makebold() {
  const parent = document.getElementById("text");
  parent.appendChild(document.createElement('b')).appendChild(parent.childNodes[0]);
}
<div id="text" onClick=makebold()>
  TEST
</div>

此快捷方式有效，因为appendChild返回附加的节点。所以parent.appendChild(document.createElement('b'))将返回<b>创建的那个，然后你可以调用appendChild那个<b>。

于 2021-08-04T03:21:27.637 回答
1

试试这个。封装和封装 特定标签。根据您的要求

运行代码片段： 

function capsulate(tag, targetElmID) {
  var text = document.getElementById(targetElmID).innerText;
  text = "<"+tag+">"+text+"</"+tag+">";
  document.getElementById(targetElmID).innerHTML = text;
}
function encapsulate(tag, targetElmID){
  let text_ = document.getElementById(targetElmID).innerText;
  let newtext = '';
  let p_ = false;
  for(let a in text_){
    if(text_[a] === "<" && text_[a+1] === tag && p_ === false){ p_ = true; }
    else if(text_[a] === ">" && p_ === true){ p_ = false; }
    if( p_ === false ){ newtext += text_[a]; }
  }
  document.getElementById(targetElmID).innerHTML = newtext;
}
<p>Capsulate with html tag. sintax: capsulate('tagName', 'targetElementID')</p>
<button onclick="capsulate('b', 'text')">capsulate with b tag</button>
<p>Encapsulate specific html tag. sintax: encapsulate('tagName', 'targetElementID')</p>
<button onclick="encapsulate('b', 'text')">encapsulate</button>
<p>Demo : </p>

<span id="text">i am the rabbit</span>, i love carrot.

于 2021-08-04T03:30:49.843 回答
0

使用 iframe。在这种情况下，内容将与主文档完全隔离。

同样使用 html(parsedHTML) 对我来说看起来很不安全。

于 2021-08-04T03:35:05.267 回答