如何正确地将Child（a）附加到div答案

【问题标题】：How to properly appendChild(a) to a div如何正确地将Child（a）附加到div
【发布时间】：2020-05-24 05:37:54
【问题描述】：

请帮助我如何在下面的示例中正确修复 appendchild(a)。我想在 div 前面添加一个带 target _blank 的 href。

这是我的javascript：

  onSelection: function (feedback) {
    document.querySelector("#autoComplete").blur();
    const selection = feedback.selection.value.link;

    var a = document.createElement("a");
    a.setAttribute("href", selection);
    a.setAttribute('target', '_blank');
    PLEASE-HELP-ME-HOW-TO.appendChild(a);

这是 HTML：

<div data-id="2" class="autoComplete_result">google</div>

我的 HTML 中需要这个：

<a href=https://google.com" target="_blank">
 <div data-id="2" class="autoComplete_result">google</div>
</a>

谢谢！

【问题讨论】：

a 标签在 ol 或 ul 下无效
我把 li 改成了 div

标签： javascript autocomplete href

【解决方案1】：

试试这个

var wrapper = document.createElement('a');
wrapper.href="https://www.google.com";
wrapper.target="_blank";


var li= document.querySelector('.autoComplete_result'); 
wrapper.appendChild(li.cloneNode(true)); 
li.parentNode.replaceChild(wrapper, li);

console.log(wrapper.innerHTML)

&lt;div data-id="2" class="autoComplete_result"&gt;google&lt;/div&gt;

【讨论】：

【解决方案2】：

正如我在评论中所说，这是无效的语法。你想要的是：

 <li data-id="2" class="autoComplete_result"><a href=https://google.com" target="_blank">google</a></li>

【讨论】：

我已经把它改成了div而不是li
仍然是无效的 html，因为 a 标签不能将 a div 标签作为子标签。