Hướng dẫn add html tag to string javascript - thêm thẻ html vào chuỗi javascript

Ngày nay, chúng tôi sẽ xem xét bốn kỹ thuật khác nhau mà bạn có thể sử dụng để có được và đặt văn bản và HTML trong các yếu tố DOM.

Nào cùng đào vào bên trong!

Tài sản var EN = require('./en'); {EN.homePage.loginTitle} 7

Bạn có thể sử dụng thuộc tính

var EN = require('./en');
{EN.homePage.loginTitle}

<div class="greeting">
	<p>Hello world!p>
div>

let greeting = document.querySelector('.greeting');

// Get HTML content
// returns "
Hello world!
"
let html = greeting.innerHTML;

// Set HTML content
// This replaces what was in there already
greeting.innerHTML = 'We can dynamically change the HTML. We can even include HTML elements like this link.';

// Add HTML to the end of an element's existing content
greeting.innerHTML += ' Add this after what is already there.';

// Add HTML to the beginning of an element's existing content
greeting.innerHTML = 'We can add this to the beginning. ' + elem.innerHTML;

// You can inject entire elements into other ones, too
greeting.innerHTML += '
A new paragraph
';

Ở đây, một bản demo của tài sản

var EN = require('./en');
{EN.homePage.loginTitle}

Tài sản loginTitle: {__html: 'Do you already have an account?' } ...

0

Bạn có thể sử dụng thuộc tính

loginTitle: {__html: 'Do you already  have  an account?' }
...

var EN = require('./en');
{EN.homePage.loginTitle}

<div class="greeting">
	<p>Hello world!p>
div>

let greeting = document.querySelector('.greeting');

// Get HTML content
// returns "
Hello world!
"
let html = greeting.outerHTML;

// Set HTML content
// This completely replaces the 
 element and all of its content
greeting.outerHTML = '
Goodbye, friend! Click here to leave.';

// Add HTML after the element (and outside of it)
greeting.outerHTML += ' Add this after what is already there.';

// Add HTML before the element (and outside of it)
greeting.outerHTML = 'We can add this to the beginning. ' + greeting.innerHTML;

Ở đây, một bản demo của tài sản

loginTitle: {__html: 'Do you already  have  an account?' }
...

Tài sản loginTitle: {__html: 'Do you already have an account?' } ...

4

Bạn có thể sử dụng thuộc tính

loginTitle: {__html: 'Do you already  have  an account?' }
...

Trong ví dụ dưới đây, bạn có thể nhận thấy rằng thuộc tính

loginTitle: {__html: 'Do you already  have  an account?' }
...

loginTitle: {__html: 'Do you already  have  an account?' }
...

loginTitle: {__html: 'Do you already  have  an account?' }
...

Bất kỳ phần tử HTML nào có trong một chuỗi khi cài đặt nội dung với thuộc tính

loginTitle: {__html: 'Do you already  have  an account?' }
...

<div class="greeting">
	<style type="text/css">
		p {
			color: rebeccapurple;
		}
	style>
	<p hidden>This is not rendered.p>
	<p>Hello world!p>
div>

let greeting = document.querySelector('.greeting');

// Get text content
// returns "p {color: rebeccapurple;} This is not rendered. Hello world!"
let text = greeting.textContent;

// Set text content
// This completely replaces whats there, including any HTML elements
greeting.textContent = 'We can dynamically change the content.';

// Add text to the end of an element's existing content
greeting.textContent += ' Add this after what is already there.';

// Add text to the beginning of an element's existing content
greeting.textContent = 'We can add this to the beginning. ' + greeting.textContent;

// HTML elements are automatically encoded and rendered as-is
greeting.textContent = '
See you later!
';

Ở đây, một bản demo của tài sản

loginTitle: {__html: 'Do you already  have  an account?' }
...

Thuộc tính loginTitle: ['Do you already ', have, ' an account'] ...

{EN.homePage.loginTitle}

1

Thuộc tính

loginTitle: ['Do you already ', have, ' an account']
...
{EN.homePage.loginTitle}

Không giống như thuộc tính

loginTitle: {__html: 'Do you already  have  an account?' }
...

loginTitle: ['Do you already ', have, ' an account']
...
{EN.homePage.loginTitle}

Giống như

loginTitle: {__html: 'Do you already  have  an account?' }
...

<div class="greeting">
	<style type="text/css">
		p {
			color: rebeccapurple;
		}
	style>
	<p hidden>This is not rendered.p>
	<p>Hello world!p>
div>

var EN = require('./en');
{EN.homePage.loginTitle}

Ở đây, một bản demo của tài sản

loginTitle: ['Do you already ', have, ' an account']
...
{EN.homePage.loginTitle}

Bạn nên sử dụng cái nào?

Nói chung, nếu bạn chỉ sửa đổi văn bản, sử dụng thuộc tính

loginTitle: {__html: 'Do you already  have  an account?' }
...

Để sửa đổi HTML, thuộc tính

var EN = require('./en');
{EN.homePage.loginTitle}