Bagaimana Anda membuat string dalam html?

Dalam tutorial ini, kita akan mengenal berbagai metode untuk membuat elemen dari string di JavaScript. Membuat elemen dari string bisa sangat berguna jika kita harus membuat elemen secara dinamis yang membuat situs web menjadi interaktif. Contohnya seperti di aplikasi daftar tugas yang kami tambahkan, hapus, dan edit item tugas

Metode createElement()

Kami membuat item JavaScript menggunakan metode createElement(). Untuk membuat elemen tertentu, kita meneruskan nama item sebagai string ke dalam metode createElement()

Fungsi createElement(tagName) memiliki parameter sebagai nama tag yang akan dibuat menggunakan metode ini. Di sini tagName adalah nama parameter dan akan berbentuk string. Perhatikan bahwa hanya satu elemen yang akan dibuat dari satu string

Sintaksis

document.createElement("tagName")

Di tempat tagName kami memberikan nama tag seperti p (paragraf), h1 (heading 1), img (gambar). createElement akan membuat tagName menjadi huruf kecil sehingga Anda tidak perlu khawatir tentang kasus ini

Langkah

• LANGKAH 1 - Buat string dengan nilai elemen seperti h3 dan p, dll

• LANGKAH 2 - Berikan string ke metode createElement() sebagai parameter. Tetapkan nilai ke variabel. Ini akan membuat elemen yang diperlukan

• LANGKAH 3 - Setelah membuat elemen, kami menetapkan teks yang diinginkan ke kedua elemen menggunakan properti innerText

• LANGKAH 4 - Setelah semua, tambahkan kita menggunakan metode append() atau appendChild() untuk menambahkan elemen yang dibuat ke halaman web sehingga akan terlihat oleh pengguna

Mari buat heading dan paragraf dari string

let string1="h3"
let string2="p"
let element1=document.createElement(string1)
let element2=document.createElement(string2)

Jadi, Anda harus tahu tentang cara kami membuat elemen tetapi membuat elemen tidak akan membantu untuk menampilkan elemen tersebut kepada pengguna karena itu bukan bagian dari DOM, tetapi kami harus menjadikannya bagian dari DOM dengan menambahkannya ke halaman web

Jadi, kami menggunakan beberapa metode seperti append(), dan appendChild()

Contoh

Tambahkan elemen yang dibuat menggunakan metode append()

Dalam contoh di bawah ini kami membuat dua elemen h3 dan p menggunakan metode document createElement(). Kemudian tetapkan beberapa teks ke elemen ini dan tambahkan elemen ke DOM menggunakan metode append(). Terakhir, tampilkan elemen menggunakan properti innerHTML

   
Creating elements from string in JavaScriptnhi


   

Contoh

Tambahkan elemen yang dibuat menggunakan metode appendChild()

Pada contoh di bawah ini, kami membuat dua elemen h3 dan p menggunakan metode document createElement(). Kemudian tetapkan beberapa teks ke elemen ini dan tambahkan elemen ke DOM menggunakan metode appendChild(). Terakhir, tampilkan elemen menggunakan properti innerHTML

   
Creating elements from string in JavaScript 


   

Sekarang Anda mungkin berpikir bahwa output program di atas adalah sama lalu apa yang membuat kedua program tersebut berbeda?

Yah, ya keduanya digunakan untuk menambahkan node ke dokumen HTML tetapi dalam kasus metode append() mengembalikan node yang ditambahkan tetapi metode appendChildI() tidak mengembalikan apa pun

Menggunakan metode append() kita dapat menambahkan beberapa elemen sekaligus tetapi dalam metode appendChild() kita hanya dapat menambahkan satu elemen sekaligus

Menyukai

document.body.append(element1, element2)

Ini akan melakukan pekerjaan yang sama seperti

document.body.append(element1)
document.body.append(element2)

Menggunakan metode append() DOMString dan DOMNodes keduanya dapat ditambahkan ke elemen induk tetapi dalam kasus metode appendChild() hanya DOMNodes yang dapat ditambahkan ke elemen induk

Kemarin, saya menulis tentang Reef, alternatif ringan saya untuk Vue dan React. Selama beberapa hari ke depan, saya ingin melihat bagaimana berbagai bagiannya bekerja di bawah tenda

Hari ini, kita akan melihat cara mengambil string HTML dan mengubahnya menjadi markup yang sebenarnya

Mengapa Anda membutuhkan ini

Jika Anda ingin menyuntikkan string ke dalam DOM, Anda dapat melakukannya cukup dengan innerHTML

app.innerHTML = '<h1>Hello, world!</h1>';

Tapi Reef tidak hanya mendorong markup ke dalam sebuah elemen. Itu membandingkan markup yang ada dalam suatu elemen dengan tampilannya, dan hanya memperbarui hal-hal yang perlu diubah

Misalnya, jika konten yang ada di dalam

<h1>Hi, universe!</h1>

<h1>Hi, universe!</h1>

Reef hanya akan memperbarui teks di dalam

<h1>Hi, universe!</h1>

Agar itu berfungsi, kita perlu mengonversi string HTML menjadi elemen HTML aktual yang dapat dilalui, dipetakan, dan dianalisis

Membuat metode pembantu

Pertama, mari buat fungsi pembantu yang akan menerima string dan mengembalikan HTML

/**
 * Convert a template string into HTML DOM nodes
 * @param  {String} str The template string
 * @return {Node}       The template HTML
 */
var stringToHTML = function (str) {
	// Code goes here...
};

Pendekatan sederhana

Cara paling sederhana untuk melakukannya adalah dengan membuat elemen, masukkan string ke dalam dengan innerHTML, lalu kembalikan elemen tersebut

/**
 * Convert a template string into HTML DOM nodes
 * @param  {String} str The template string
 * @return {Node}       The template HTML
 */
var stringToHTML = function (str) {
	var dom = document.createElement('div');
	dom.innerHTML = str;
	return dom;
};

Namun, pendekatan ini tidak sempurna

Meskipun elemen ini terlepas—yaitu, sebenarnya bukan di DOM yang ada—browser akan tetap melakukan hal-hal seperti mengunduh file gambar

Ini akan memicu file gambar untuk diunduh, meskipun markup belum ditampilkan di mana pun

stringToHTML('<img src="my-awesome-photo.jpg">');

Cara yang lebih baik

Setelah melakukan banyak penelitian, saya menemukan metode browser asli yang menghindari masalah ini.

<h1>Hi, universe!</h1>

<h1>Hi, universe!</h1>

Untuk menggunakannya, Anda membuat instance baru. Kemudian Anda menggunakan metode

<h1>Hi, universe!</h1>

<h1>Hi, universe!</h1>

<h1>Hi, universe!</h1>

Karena ini benar-benar elemen

<h1>Hi, universe!</h1>

<h1>Hi, universe!</h1>

/**
 * Convert a template string into HTML DOM nodes
 * @param  {String} str The template string
 * @return {Node}       The template HTML
 */
var stringToHTML = function (str) {
	var parser = new DOMParser();
	var doc = parser.parseFromString(str, 'text/html');
	return doc.body;
};

Sekarang kita dapat melakukan ini, dan tidak ada pengunduhan yang akan dipicu

stringToHTML('<img src="my-awesome-photo.jpg">');

Menggabungkan dua pendekatan

Metode

<h1>Hi, universe!</h1>

<h1>Hi, universe!</h1>

Saya suka menggabungkan dua pendekatan, menggunakan

<h1>Hi, universe!</h1>

Untuk menguji dukungan, kami akan menetapkan IIFE ke variabel

/**
 * Convert a template string into HTML DOM nodes
 * @param  {String} str The template string
 * @return {Node}       The template HTML
 */
var stringToHTML = function (str) {
	// Code goes here...
};

Di dalam IIFE, pertama-tama kami akan memeriksa apakah

/**
 * Convert a template string into HTML DOM nodes
 * @param  {String} str The template string
 * @return {Node}       The template HTML
 */
var stringToHTML = function (str) {
	// Code goes here...
};

/**
 * Convert a template string into HTML DOM nodes
 * @param  {String} str The template string
 * @return {Node}       The template HTML
 */
var stringToHTML = function (str) {
	// Code goes here...
};

/**
 * Convert a template string into HTML DOM nodes
 * @param  {String} str The template string
 * @return {Node}       The template HTML
 */
var stringToHTML = function (str) {
	// Code goes here...
};

<h1>Hi, universe!</h1>

<h1>Hi, universe!</h1>

/**
 * Convert a template string into HTML DOM nodes
 * @param  {String} str The template string
 * @return {Node}       The template HTML
 */
var stringToHTML = function (str) {
	// Code goes here...
};

/**
 * Convert a template string into HTML DOM nodes
 * @param  {String} str The template string
 * @return {Node}       The template HTML
 */
var stringToHTML = function (str) {
	var dom = document.createElement('div');
	dom.innerHTML = str;
	return dom;
};

var support = (function () {
	if (!window.DOMParser) return false;
	var parser = new DOMParser();
	try {
		parser.parseFromString('x', 'text/html');
	} catch(err) {
		return false;
	}
	return true;
})();

Di dalam metode

/**
 * Convert a template string into HTML DOM nodes
 * @param  {String} str The template string
 * @return {Node}       The template HTML
 */
var stringToHTML = function (str) {
	var dom = document.createElement('div');
	dom.innerHTML = str;
	return dom;
};

<h1>Hi, universe!</h1>

Apa string dalam HTML?

Bagaimana Anda menambahkan nilai ke string dalam HTML?

Bagaimana cara mendapatkan elemen HTML dari string?

Apa sintaks yang tepat untuk membuat string?