Обертывание DIV вокруг гиперссылки, созданной с помощью appendChild

#javascript

#javascript

Вопрос:

У меня есть немного JS, чтобы добавить гиперссылку электронной почты на страницу после DIV со значением ID section_form_id :

 // build email

var elmNewContentCustomer = document.createElement('a');
var elmFoo = document.getElementById('section_form_id');

elmNewContentCustomer.href = 'mailto:me@example.com?subject=Something';
elmNewContentCustomer.setAttribute("style", "color:blue;");
elmNewContentCustomer.setAttribute("id", "email_customer_id");
elmNewContentCustomer.appendChild(document.createTextNode('Email Customer'));
elmFoo.parentNode.insertBefore(elmNewContentCustomer, elmFoo.nextSibling);
  

Это работает нормально. Однако я хотел бы поместить гиперссылку внутри DIV, поэтому я задаю атрибуты стиля DIV.

Я попытался использовать этот метод, который заключался в создании DIV и вставке его перед использованием блока электронной appendChild почты, но он не работает:

 var elmNewEmailDev = document.createElement('div');
var elmFoo2 = document.getElementById('email_customer_id');

elmNewEmailDev.setAttribute("style", "background:yellow;");
elmNewEmailDev.appendChild(elmFoo.parentNode.insertBefore(elmNewContentCustomer, elmFoo.nextSibling));
elmFoo2.parentNode.insertBefore(elmNewEmailDev, elmFoo.elmFoo2);
  

Как я могу обернуть DIV вокруг гиперссылки, чтобы затем использовать setAttribute его для управления стилем этого DIV?

Ответ №1:

Следуйте этому методу, чтобы получить желаемый результат.

 var myEmailLink = "<a href='mailto:a@b.com'>a@b.com</a>";

var myDiv = document.getElementById("section_form_id");


myDiv.insertAdjacentHTML('afterEnd', myEmailLink )  
 <div id="section_form_id">
My Div Here
</div>