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

Question

[请帮助我如何在下面的示例中正确修复appendchild（a）。我想在div的前面添加带有目标_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>

谢谢！

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

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

Answer 2

为了将a添加为li的父项：

var li = document.getElementsByClassName("autoComplete_result")[0];
var parent = li.parentNode;
var a = document.createElement("a");
a.setAttribute("href", 'https://www.google.com/');
a.setAttribute('target', '_blank');
parent.replaceChild(a, li);
a.appendChild(li);

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

Answer 3

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

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