如何正确地将appendChild(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>