通过 html 标签封装元素

Question

我有这段代码，它可以按我的意愿运行。目标是用粗体标记封装元素 ("TEST")。我只想知道是否有任何内置方法可以通过 html 标签封装元素？类似于 insertAdjacentHTML ，但 insertAdjacentHTML 会自动关闭标签。所以在这种情况下，我不能做 2x insertAdjacentHTML（afterbegin 对于 和 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>

Answer 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 return 是附加节点。所以 parent.appendChild(document.createElement('b')) 将 return 创建的 <b>，然后你可以在 <b>.

上调用 appendChild

Answer 2

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

运行代码片段 ：

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.

Answer 3

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

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

通过 html 标签封装元素

encapsulate element by html tag

html

javascript

insertadjacenthtml