Dize olan bir HTML kodunuz olduğunu varsayalım:
let string_of_html = ` Cool `;Belki bir API'den gelir ya da şablon değişmezlerinden veya başka bir şeyden kendiniz oluşturdunuz.
Bunu aşağıdaki innerHTMLgibi bir öğeye koymak için kullanabilirsiniz :
document.body.innerHTML = string_of_html; // Append it instead document.body.innerHTML += string_of_html;insertAdjacentHTMLYeni HTML'yi dört farklı yere yerleştirebileceğinizden, işleve giderseniz biraz daha fazla kontrole sahip olursunuz:
text inside node Bunu şu şekilde kullanıyorsun ...
el.insertAdjacentHTML('beforebegin', string_of_html); el.insertAdjacentHTML('afterbegin', string_of_html); el.insertAdjacentHTML('beforeend', string_of_html); el.insertAdjacentHTML('afterend', string_of_html);Yeni oluşturulan DOM ile herhangi bir şey yapmadan önce JavaScript'te olmasını isteyebileceğiniz durumlar vardır. Bu durumda, önce dizenizi şu şekilde ayrıştırabilirsiniz:
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html');Bu size eksiksiz bir DOM verecektir, bu nedenle eklediğiniz çocuğu çıkartmanız gerekir. Sadece bir ana öğeye sahip olduğunu varsayarsak, bu şuna benzer ...
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html'); let new_element = dom.body.firstElementChild;Şimdi bununla gerektiği new_elementgibi uğraşabilirsiniz, sanırım onunla ne yapmanız gerektiğini yapmadan önce.
Ancak bunu yapmak biraz daha kolay:
let new_element = document.createRange() .createContextualFragment(string_of_html);Öğeyi doğrudan eklenecek bir belge parçası olarak veya gerektiği gibi alacaksınız. Bu yöntem, hem yararlı hem de tehlikeli olabilen, içinde bulduğu e-postaları gerçekten uygulayacağı için dikkate değerdir .
Tüm bunlarda hatırı sayılır bir nüans var. Örneğin, HTML'nin geçerli olması gerekir. Hatalı biçimlendirilmiş HTML işe yaramayacak. Hatalı ayrıca koyarak gibi sürpriz sizi yakalayabilirsiniz bir içine
Koen Schaft, burada sahip olduklarımızla ilgili ama daha ayrıntılı ve daha fazla bilgi içeren "HTML dizesinden bir DOM düğümü oluşturun" yazıyor.
başarısız olur çünkü a. #####