Thay thế nội dung div bằng javascript

Question

HTML DOM cho phép JavaScript thay đổi nội dung của các phần tử HTML

Nội dung chính Show

Thay đổi nội dung HTML
Thay đổi giá trị của một thuộc tính
Nội dung HTML động
tài liệu. viết()
Kiểm tra bản thân với các bài tập
Tập thể dục
Làm cách nào để thay thế nội dung div trong jQuery?
Ví dụ về jQuery thay thế nội dung div
Sự kết luận
Bài viết được đề xuất
Cái gì được sử dụng để thay thế nội dung phần tử trong JavaScript?
Chúng ta có thể sử dụng div trong JavaScript không?

Thay đổi nội dung HTML

Cách dễ nhất để sửa đổi nội dung của phần tử HTML là sử dụng thuộc tính innerHTML

Để thay đổi nội dung của một phần tử HTML, hãy sử dụng cú pháp này

tài liệu. getElementById(id). InternalHTML = HTML mới

Ví dụ này thay đổi nội dung của một

yếu tố

Thí dụ

Chào thế giới

Tự mình thử »

Ví dụ giải thích

Tài liệu HTML ở trên chứa một
phần tử có id="p1"
Chúng tôi sử dụng HTML DOM để lấy phần tử có id="p1"
Một JavaScript thay đổi nội dung (innerHTML) của phần tử đó thành "Văn bản mới. "

Ví dụ này thay đổi nội dung của một

yếu tố

Thí dụ

tiêu đề cũ

Tự mình thử »

Ví dụ giải thích

Tài liệu HTML ở trên chứa một phần tử có id="id01"
Chúng tôi sử dụng HTML DOM để lấy phần tử có id="id01"
JavaScript thay đổi nội dung (innerHTML) của phần tử đó thành "Tiêu đề mới"

Thay đổi giá trị của một thuộc tính

Để thay đổi giá trị của thuộc tính HTML, hãy sử dụng cú pháp này

tài liệu. getElementById(id). thuộc tính = giá trị mới

Ví dụ này thay đổi giá trị của thuộc tính src của phần tử

<html>
<head>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js>
</script>
</head>
<body>
<div id="demo">
<div class="name">
---Datas with html tags if needed ---
</div>
</div>
<script>
$("name").click(function(e){
e.preventDefault();
var eg=;
$('#demo').replaceWith('<div class="name">' + eg + '</div>');
});
</script>
</body>
</html>

2

Thí dụ

Tự mình thử »

Ví dụ giải thích

Tài liệu HTML ở trên chứa một phần tử

<html>
<head>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js>
</script>
</head>
<body>
<div id="demo">
<div class="name">
---Datas with html tags if needed ---
</div>
</div>
<script>
$("name").click(function(e){
e.preventDefault();
var eg=;
$('#demo').replaceWith('<div class="name">' + eg + '</div>');
});
</script>
</body>
</html>

2 với innerHTML0

Chúng tôi sử dụng HTML DOM để lấy phần tử có innerHTML0
Một JavaScript thay đổi thuộc tính innerHTML2 của phần tử đó từ "smiley. gif" thành "phong cảnh. jpg"

Nội dung HTML động

JavaScript có thể tạo nội dung HTML động

Thí dụ

Tự mình thử »

tài liệu. viết()

Trong JavaScript, innerHTML3 có thể được sử dụng để ghi trực tiếp vào luồng đầu ra HTML

Thí dụ

bla bla bla

Tự mình thử »

Không bao giờ sử dụng innerHTML3 sau khi tải tài liệu. Nó sẽ ghi đè lên tài liệu

Kiểm tra bản thân với các bài tập

Tập thể dục

Sử dụng HTML DOM để thay đổi giá trị của thuộc tính src của hình ảnh

Cung cấp câu trả lời "

bắt đầu bài tập

The jQuery replace div contents is the data contents that can be used on the

tag and replacing the contents wherever we needed using jQuery method like replaceWith() or any other replace methods we want to replace the datas that can be covered on the innerHTML using the div element or any other html elements. The data contents are declared and passed it as the innerHTML tags like

tag and it is to be calling on the jQuery selector while the replaceable contents is to be inserted on the DOM level using jQuery replace child methods like replaceWith() the contents are splitted and replaced with the new datas.

cú pháp

Bắt đầu khóa học phát triển phần mềm miễn phí của bạn

Phát triển web, ngôn ngữ lập trình, kiểm thử phần mềm và những thứ khác

The jQuery library has many default methods and classes, widgets for used on creating the web based application. The HTML will combine with jQuery for adding the data contents on the both script and UI code. Mostly the

element will have parameter like id and some other child tags by using the id or the div element as the jQuery selector and calling the methods like replaceWith() etc.

<html>
<head>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js>
</script>
</head>
<body>
<div id="demo">
<div class="name">
---Datas with html tags if needed ---
</div>
</div>
<script>
$("name").click(function(e){
e.preventDefault();
var eg=;
$('#demo').replaceWith('<div class="name">' + eg + '</div>');
});
</script>
</body>
</html>

The above codes are the basic syntax for utilising the

tag and replaceWith() method on the html page.

Làm cách nào để thay thế nội dung div trong jQuery?

The above paragraph in syntax section we discussed on the

tag in html page. We used n number of

tags based on the UI needs we called the div tag elements on the each other section of the html page. But the id of the

tag element is to be passing on the jQuery selector once we passed the datas are pulled to the jQuery library. We can declare the replaced values as the separate variable and the variable is to called on the replaceWith() method. The method will contain both

tag elements and replaced text or variable as the parameter arguments. The elements from the html will replaced with the DOM level so after replacement operation the one DOM element is to be replaced with another DOM Element. When we declared any return type that time it returns the parent Node property the parent node of the specific defined node as the Node object, in case there is no parent it returns null value. It can also possible for to replace the child Nodes which is having no parent Node on the script. The function which replaces the inner contents of the selected html div elements however we can add the html tags using inside with the help of html() method for to replace the selected HTML element.

Ví dụ về jQuery thay thế nội dung div

Dưới đây là các ví dụ sau được đề cập dưới đây

Gói phát triển phần mềm tất cả trong một(hơn 600 khóa học, hơn 50 dự án)

Giá
Xem khóa học

600+ Khóa học trực tuyến. hơn 50 dự án. Hơn 3000 giờ. Giấy chứng nhận có thể kiểm chứng. Truy cập Trọn đời
4. 6 (82.404 xếp hạng)

Ví dụ 1

Mã số

<!DOCTYPE html>
<html>
<head>
<title> Welcome to My Domain it’s a first Example for div tag using jQuery Replace concept</title>
<style>
body {
display: block;
margin-top: 17%;
}
h1 {
color:blue;
text-align:center;
}
div { border:3px green;
color:violet;
margin:7px;
cursor:pointer;
}
p { border:3px green;
color:blue;
margin:3px;
cursor:pointer;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body bgcolor="red">
<p>Have a Nice Day Users</p>
<p>Thank you spending you time in our application kindly stay on this</p>
<p>Please find the below our Updates on this application</p>
<p>The div tag data contents are used and shown on the screen by using the html web pages</p>
<p>With the help of jQuery replaceWith() method the datas are replaced with the new html dom elements</p>
<div>Your replaced contents will be shown on the web screen</div>
<script>
$("p").click(function () {
$(this).replaceWith($("div"));
});
</script>
</body>
</html>

đầu ra

Trong ví dụ trên, chúng tôi đã sử dụng nội dung div với phương thức replaceWith() để thay thế một phần tử dom bằng một phần tử khác

Ví dụ #2

Mã số

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Welcome To My Domain its a Second Example for replacing the elements by using the div tag elements</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<style>
body {
font-family: Arial, TimesNewRoman,Helvetica, sans-serif;
background-color: blue;
color: green;
text-decoration: none;
padding: 23px 33px;
position: center;
display: inline-block;
border-radius: 5px;
}
.demo {
position: center;
top: -23px;
right: -23px;
padding: 7px 13px;
border-radius: 47%;
background-color: pink;
color: yellow;
}
</style>
<script type="text/javascript" language="javascript">
$(function () {
$("#first").click(function () {
$("#demo").html($("#demo").html().replace("Welcome", "raman"));
});
});
</script>
</head>
<body>
<div id="demo">Welcome
<div class=”name”>
Welcome Users its the second example for replacing div contents by using the jQuery replace() method its one of the scenario we used
</div>
<div class="name">
Welcome Raman Have a Nice Day Thank you for spending the time for this occasion
</div>
<div class="name">
Welcome Siva Have a Nice Day Thank you for spending the time for this occasion
</div>
</div><br />
<input id="first" type="button" value="Replace Value" />
</body>
</html>

đầu ra

Trong ví dụ thứ hai, chúng tôi đã sử dụng nội dung html trên trang, ngoài ra, phần tử nút được sử dụng trên tập lệnh để thay thế nội dung cụ thể trên trang web

Ví dụ #3

Mã số

<!DOCTYPE html>
<html>
<head>
<title>Welcome to My Domain it’s a Third Example for regarding the div contents on the replace method</title>
<style>
img {
width: 540px;
height: 530px;
}
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script src="https://code.jquery.com/jquery-3.5.0.min.js">
</script>
<script  type="text/javascript" language="javascript">
$(function () {
$("#first").click(function () {
$("#demo").html($("#demo").html().replace("Welcome you", "raman"));
});
});
</script>
</head>
<body>
<div id="demo">Welcome you users
<div class="name">
<img id="second" src='website.jpg' alt="values" />
<marquee>Thank you users have a nice day</marquee>
</div>
</div>
<input id="first" type="button" value="Replace Value" />
<script>
$(document).ready(function() {
$('img').on({
'click': function() {
let vars = ($(this).attr('src') === 'one.jpg') ?
'website.jpg' :
'one.jpg';
$(this).attr('src', vars);
}
});
});
</script>
</body>
</html>

đầu ra

Trong ví dụ cuối cùng, chúng tôi đã sử dụng các hình ảnh bổ sung trong tập lệnh để thay đổi hình ảnh khi chúng tôi nhấp vào hình ảnh trên trang. Ngoài ra, chúng tôi nhấp vào nút để thay thế nội dung

Sự kết luận

In jQuery library has default methods and keywords for creating a web application with user-friendly nature. Additionally, the html elements like

tag and other tag elements are combined and called the data contents to the jQuery selectors for performing the operations like replace() the contents from one DOM element to the another DOM element.

Bài viết được đề xuất

Đây là hướng dẫn về jQuery thay thế nội dung div. Ở đây chúng ta thảo luận về Cách thay thế nội dung div trong jQuery cùng với các ví dụ và kết quả đầu ra. Bạn cũng có thể xem các bài viết sau để tìm hiểu thêm –

Cái gì được sử dụng để thay thế nội dung phần tử trong JavaScript?

replaceWith() Phần tử. Phương thức replaceWith() thay thế Phần tử này trong danh sách con của cha mẹ bằng một tập hợp các đối tượng Nút hoặc chuỗi. Các đối tượng chuỗi được chèn dưới dạng các nút Văn bản tương đương