Hướng dẫn how do you inject html in html? - làm thế nào để bạn đưa html vào html?

Tôi hy vọng rằng điều này không quá chủ quan. Tôi cảm thấy có một câu trả lời dứt khoát nên ở đây.

Tôi muốn tạo HTML này một cách nhanh chóng bằng cách sử dụng JS (không có thư viện):

<a href="#" id="playButton">Play</a>
<a href="javascript: void(0)" id="muteUnmute">Mute</a>
<div id="progressBarOuter"> 
  <div id="bytesLoaded"></div>
    <div id="progressBar"></div>
</div>
<div id="currentTime">0:00</div>
<div id="totalTime">0:00</div>

Sử dụng JavaScript. Tôi biết tôi có thể làm điều này bằng cách sử dụng createdeement, nhưng có vẻ rất dài để làm điều này cho mỗi yếu tố. Bất cứ ai cũng có thể đề xuất một cách để làm điều này với sự ngắn gọn hơn.

Tôi không có quyền truy cập vào một thư viện trong dự án này .... vì vậy không có jQuery, v.v.

Hỏi ngày 21 tháng 9 năm 2010 lúc 16:27Sep 21, 2010 at 16:27

Mike Rifginmike RifginMike Rifgin

10.1k20 Huy hiệu vàng72 Huy hiệu bạc111 Huy hiệu đồng20 gold badges72 silver badges111 bronze badges

2

Giữ đánh dấu của bạn tách biệt với mã của bạn:

Bạn có thể nhúng các đoạn HTML mà bạn sẽ sử dụng làm các mẫu ẩn bên trong trang HTML của bạn và nhân bản chúng theo yêu cầu:

<style type="text/css">
#templates { display: none }
</style>
...
<script type="text/javascript">
var node = document.getElementById("tmp_audio").cloneNode(true);
node.id = ""; // Don't forget :)
// modify node contents with DOM manipulation
container.appendChild(node);
</script>
...
<div id="templates">
    <div id="tmp_audio">
        <a href="#" class="playButton">Play</a>
        <a href="#" class="muteUnmute">Mute</a>
        <div class="progressBarOuter"> 
            <div class="bytesLoaded"></div>
            <div class="progressBar"></div>
        </div>
        <div class="currentTime">0:00</div>
        <div class="totalTime">0:00</div>
    </div>
</div>

Cập nhật: Lưu ý rằng tôi đã chuyển đổi các thuộc tính

<style type="text/css">
#templates { display: none }
</style>
...
<script type="text/javascript">
var node = document.getElementById("tmp_audio").cloneNode(true);
node.id = ""; // Don't forget :)
// modify node contents with DOM manipulation
container.appendChild(node);
</script>
...
<div id="templates">
    <div id="tmp_audio">
        <a href="#" class="playButton">Play</a>
        <a href="#" class="muteUnmute">Mute</a>
        <div class="progressBarOuter"> 
            <div class="bytesLoaded"></div>
            <div class="progressBar"></div>
        </div>
        <div class="currentTime">0:00</div>
        <div class="totalTime">0:00</div>
    </div>
</div>

<style type="text/css">
#templates { display: none }
</style>
...
<script type="text/javascript">
var node = document.getElementById("tmp_audio").cloneNode(true);
node.id = ""; // Don't forget :)
// modify node contents with DOM manipulation
container.appendChild(node);
</script>
...
<div id="templates">
    <div id="tmp_audio">
        <a href="#" class="playButton">Play</a>
        <a href="#" class="muteUnmute">Mute</a>
        <div class="progressBarOuter"> 
            <div class="bytesLoaded"></div>
            <div class="progressBar"></div>
        </div>
        <div class="currentTime">0:00</div>
        <div class="totalTime">0:00</div>
    </div>
</div>

node.getElementsByTagName("div")[4].innerHTML =
    format(data.currentTime);

Ngoài ra, bạn có thể hành động trên HTML của mẫu:

<script type="text/javascript">
var tmp = document.getElementById("tmp_audio").innerHTML;
// modify template HTML with token replacement
container.innerHTML += tmp;
</script>

Đã trả lời ngày 21 tháng 9 năm 2010 lúc 16:34Sep 21, 2010 at 16:34

Ates Goralates GoralAtes Goral

Huy hiệu vàng 135K2626 gold badges135 silver badges189 bronze badges

7

Đẩy toàn bộ sự việc vào một biến JS:

var html = '<a href="#" id="playButton">Play</a>';
html += '<a href="javascript: void(0)" id="muteUnmute">Mute</a>';
html += '<div id="progressBarOuter"><div id="bytesLoaded"></div><div id="progressBar"></div></div>';
html += '<div id="currentTime">0:00</div>';
html += '<div id="totalTime">0:00</div>';

Then:

document.getElementById("parentElement").innerHTML = html;

Nếu bạn muốn sau đó:

document.getElementById("totalTime").innerHTML = "5:00";

Đã trả lời ngày 21 tháng 9 năm 2010 lúc 16:30Sep 21, 2010 at 16:30

Ryan Ternierryan TernierRyan Ternier

8,5744 Huy hiệu vàng44 Huy hiệu bạc66 Huy hiệu Đồng4 gold badges44 silver badges66 bronze badges

6

Bạn có thể dùng

<script type="text/javascript">
    function appendHTML() {
        var wrapper = document.createElement("div");
        wrapper.innerHTML = '\
<a href="#" id="playButton">Play</a>\
<a href="javascript: void(0)" id="muteUnmute">Mute</a>\
<div id="progressBarOuter"> \
<div id="bytesLoaded"></div>\
    <div id="progressBar"></div>\
</div>\
<div id="currentTime">0:00</div>\
<div id="totalTime">0:00</div>\
';
        document.body.appendChild(wrapper);
    }
</script>

Đã trả lời ngày 21 tháng 9 năm 2010 lúc 16:33Sep 21, 2010 at 16:33

Yorickyorickyorick

1.45410 Huy hiệu bạc8 Huy hiệu đồng10 silver badges8 bronze badges

Nếu bạn sống vào năm 2019 và hơn thế nữa đọc ở đây.

Với JavaScript ES6, bạn có thể sử dụng chuỗi chữ để tạo các mẫu.

Tạo một hàm trả về một chuỗi/mẫu theo nghĩa đenstring/template literal

function videoPlayerTemplate(data) {
    return `
        <h2>${data.header}</h2>
        <p>${data.subheader}</p>
        <a href="#" id="playButton">Play</a>
        <a href="javascript: void(0)" id="muteUnmute">Mute</a>
        <div id="progressBarOuter"> 
            <div id="bytesLoaded"></div>
            <div id="progressBar"></div>
        </div>
        <time id="currentTime">0:00</time>
        <time id="totalTime">0:00</time>
    `
}

Tạo một đối tượng JSON chứa dữ liệu bạn muốn hiển thị

var data = {
     header: 'My video player',
     subheader: 'Version 2 coming soon'
}

thêm nó vào bất kỳ yếu tố nào bạn thích

<style type="text/css">
#templates { display: none }
</style>
...
<script type="text/javascript">
var node = document.getElementById("tmp_audio").cloneNode(true);
node.id = ""; // Don't forget :)
// modify node contents with DOM manipulation
container.appendChild(node);
</script>
...
<div id="templates">
    <div id="tmp_audio">
        <a href="#" class="playButton">Play</a>
        <a href="#" class="muteUnmute">Mute</a>
        <div class="progressBarOuter"> 
            <div class="bytesLoaded"></div>
            <div class="progressBar"></div>
        </div>
        <div class="currentTime">0:00</div>
        <div class="totalTime">0:00</div>
    </div>
</div>

Bạn có thể đọc thêm về Chuỗi nghĩa đen ở đây

Đã trả lời ngày 26 tháng 9 năm 2019 lúc 19:35Sep 26, 2019 at 19:35

II IML0STO1II IML0STO1ii iml0sto1

1.46716 huy hiệu bạc31 huy hiệu đồng16 silver badges31 bronze badges

1

Chỉnh sửa: Nhập HTML hiện không bị phản đối.

Bây giờ với

node.getElementsByTagName("div")[4].innerHTML =
    format(data.currentTime);

Cú pháp trông như thế này:

<style type="text/css">
#templates { display: none }
</style>
...
<script type="text/javascript">
var node = document.getElementById("tmp_audio").cloneNode(true);
node.id = ""; // Don't forget :)
// modify node contents with DOM manipulation
container.appendChild(node);
</script>
...
<div id="templates">
    <div id="tmp_audio">
        <a href="#" class="playButton">Play</a>
        <a href="#" class="muteUnmute">Mute</a>
        <div class="progressBarOuter"> 
            <div class="bytesLoaded"></div>
            <div class="progressBar"></div>
        </div>
        <div class="currentTime">0:00</div>
        <div class="totalTime">0:00</div>
    </div>
</div>

Điều này sẽ chỉ tải nội dung của tệp HTML trong thuộc tính

node.getElementsByTagName("div")[4].innerHTML =
    format(data.currentTime);

Để bơm rằng từ JavaScript, bạn có thể làm một cái gì đó như:

<style type="text/css">
#templates { display: none }
</style>
...
<script type="text/javascript">
var node = document.getElementById("tmp_audio").cloneNode(true);
node.id = ""; // Don't forget :)
// modify node contents with DOM manipulation
container.appendChild(node);
</script>
...
<div id="templates">
    <div id="tmp_audio">
        <a href="#" class="playButton">Play</a>
        <a href="#" class="muteUnmute">Mute</a>
        <div class="progressBarOuter"> 
            <div class="bytesLoaded"></div>
            <div class="progressBar"></div>
        </div>
        <div class="currentTime">0:00</div>
        <div class="totalTime">0:00</div>
    </div>
</div>

Tại thời điểm tôi viết bài này, Chrome và Opera hỗ trợ nhập khẩu HTML. Bạn có thể thấy bảng tương thích cập nhật tại đây http://caniuse.com/#feat=imports

Nhưng đừng lo lắng về việc các trình duyệt không hỗ trợ nó, dù sao bạn cũng có thể sử dụng nó trong đó với WebComponentsJS Polyfill.

Để biết thêm thông tin về nhập khẩu HTML Kiểm tra http://webcomponents.org/articles/introduction-to-html-imports/

Đã trả lời ngày 18 tháng 2 năm 2016 lúc 12:51Feb 18, 2016 at 12:51

Marcelo Lazaronimarcelo LazaroniMarcelo Lazaroni

9.0613 Huy hiệu vàng32 Huy hiệu bạc40 Huy hiệu đồng3 gold badges32 silver badges40 bronze badges

Nếu bạn không cần bất kỳ xác thực nào cho cú pháp của mình (đó là điều làm cho

node.getElementsByTagName("div")[4].innerHTML =
    format(data.currentTime);

node.getElementsByTagName("div")[4].innerHTML =
    format(data.currentTime);

Cá nhân, tôi sẽ gắn bó với việc sử dụng

node.getElementsByTagName("div")[4].innerHTML =
    format(data.currentTime);

Đã trả lời ngày 21 tháng 9 năm 2010 lúc 16:29Sep 21, 2010 at 16:29

Justin Niessnerjustin NiessnerJustin Niessner

Phim thương hiệu vàng 238K4040 gold badges405 silver badges532 bronze badges

0

Nếu hiệu suất là một mối quan tâm, hãy tránh xa nội tâm. Bạn nên tạo toàn bộ cây đối tượng bằng cách sử dụng

node.getElementsByTagName("div")[4].innerHTML =
    format(data.currentTime);

Cuối cùng, nối nó vào tài liệu với một tuyên bố, không có nhiều tuyên bố.

Trong thử nghiệm không chính thức của tôi trong những năm qua, điều này sẽ cung cấp cho bạn hiệu suất tốt nhất (một số trình duyệt có thể khác nhau).

Nếu HTML được khai báo trong một biến, nó sẽ đơn giản và với một mục đích rất cụ thể. Thông thường, đây không phải là cách tiếp cận đúng.

Đã trả lời ngày 21 tháng 9 năm 2010 lúc 16:52Sep 21, 2010 at 16:52

Tim M.Tim M.Tim M.

53.1K13 Huy hiệu vàng120 Huy hiệu bạc160 Huy hiệu đồng13 gold badges120 silver badges160 bronze badges

1

Đây là 2 trường hợp có thể:

1. HTML của bạn là tĩnh
2. HTML của bạn là năng động

Giải pháp 1

Trong trường hợp này, hãy bọc HTML của bạn trong các trích dẫn đôi, biến nó thành một chuỗi và lưu nó trong một biến. Sau đó đẩy nó vào bên trong HTML, đây là bản demo 👇double quotes, make it a string and save it in a variable. then push it inside HTML, here's a demo 👇

HTML

<style type="text/css">
#templates { display: none }
</style>
...
<script type="text/javascript">
var node = document.getElementById("tmp_audio").cloneNode(true);
node.id = ""; // Don't forget :)
// modify node contents with DOM manipulation
container.appendChild(node);
</script>
...
<div id="templates">
    <div id="tmp_audio">
        <a href="#" class="playButton">Play</a>
        <a href="#" class="muteUnmute">Mute</a>
        <div class="progressBarOuter"> 
            <div class="bytesLoaded"></div>
            <div class="progressBar"></div>
        </div>
        <div class="currentTime">0:00</div>
        <div class="totalTime">0:00</div>
    </div>
</div>

JavaScript

<style type="text/css">
#templates { display: none }
</style>
...
<script type="text/javascript">
var node = document.getElementById("tmp_audio").cloneNode(true);
node.id = ""; // Don't forget :)
// modify node contents with DOM manipulation
container.appendChild(node);
</script>
...
<div id="templates">
    <div id="tmp_audio">
        <a href="#" class="playButton">Play</a>
        <a href="#" class="muteUnmute">Mute</a>
        <div class="progressBarOuter"> 
            <div class="bytesLoaded"></div>
            <div class="progressBar"></div>
        </div>
        <div class="currentTime">0:00</div>
        <div class="totalTime">0:00</div>
    </div>
</div>

Giải pháp 2

Trong trường hợp này, hãy bọc HTML của bạn trong ve sau, làm cho nó trở thành một mẫu theo nghĩa đen và lưu nó trong một biến. Sau đó đẩy nó vào bên trong HTML, ở đây, bạn có thể sử dụng các biến để thay đổi nội dung của mình. Đây là bản demo 👇back ticks, make it a template literal and save it in a variable. then push it inside HTML, here, you can use variables to change your content. here's a demo 👇

HTML

<style type="text/css">
#templates { display: none }
</style>
...
<script type="text/javascript">
var node = document.getElementById("tmp_audio").cloneNode(true);
node.id = ""; // Don't forget :)
// modify node contents with DOM manipulation
container.appendChild(node);
</script>
...
<div id="templates">
    <div id="tmp_audio">
        <a href="#" class="playButton">Play</a>
        <a href="#" class="muteUnmute">Mute</a>
        <div class="progressBarOuter"> 
            <div class="bytesLoaded"></div>
            <div class="progressBar"></div>
        </div>
        <div class="currentTime">0:00</div>
        <div class="totalTime">0:00</div>
    </div>
</div>

JavaScript

<style type="text/css">
#templates { display: none }
</style>
...
<script type="text/javascript">
var node = document.getElementById("tmp_audio").cloneNode(true);
node.id = ""; // Don't forget :)
// modify node contents with DOM manipulation
container.appendChild(node);
</script>
...
<div id="templates">
    <div id="tmp_audio">
        <a href="#" class="playButton">Play</a>
        <a href="#" class="muteUnmute">Mute</a>
        <div class="progressBarOuter"> 
            <div class="bytesLoaded"></div>
            <div class="progressBar"></div>
        </div>
        <div class="currentTime">0:00</div>
        <div class="totalTime">0:00</div>
    </div>
</div>

Giải pháp 2

Trong trường hợp này, hãy bọc HTML của bạn trong ve sau, làm cho nó trở thành một mẫu theo nghĩa đen và lưu nó trong một biến. Sau đó đẩy nó vào bên trong HTML, ở đây, bạn có thể sử dụng các biến để thay đổi nội dung của mình. Đây là bản demo 👇1 gold badge6 silver badges25 bronze badges

Quay sốSep 28, 2021 at 19:20

1.3601 Huy hiệu vàng6 Huy hiệu bạc25 Huy hiệu đồng

Đã trả lời ngày 21 tháng 9 năm 2010 lúc 16:29Sep 21, 2010 at 16:29

Justin Niessnerjustin NiessnerSLaks

850K174 Huy hiệu vàng1878 Huy hiệu bạc1947 Huy hiệu đồng174 gold badges1878 silver badges1947 bronze badges

0

Tôi có một tình huống mà tôi chuyển văn bản vào thư viện của bên thứ ba, nhưng nếu mô hình của tôi isprivate, tôi muốn thêm một yếu tố vào văn bản.

<style type="text/css">
#templates { display: none }
</style>
...
<script type="text/javascript">
var node = document.getElementById("tmp_audio").cloneNode(true);
node.id = ""; // Don't forget :)
// modify node contents with DOM manipulation
container.appendChild(node);
</script>
...
<div id="templates">
    <div id="tmp_audio">
        <a href="#" class="playButton">Play</a>
        <a href="#" class="muteUnmute">Mute</a>
        <div class="progressBarOuter"> 
            <div class="bytesLoaded"></div>
            <div class="progressBar"></div>
        </div>
        <div class="currentTime">0:00</div>
        <div class="totalTime">0:00</div>
    </div>
</div>

Điều này tạo ra các vấn đề với cách thư viện bên thứ ba xây dựng đánh dấu của nó.

Đây không bao giờ là một ý tưởng tốt, nhưng các thư viện của bên thứ ba ở đó để chúng ta không phải tự viết mọi thứ. Trong một tình huống như thế này, bạn phải dựa vào việc vượt qua đánh dấu mặc dù JavaScript.

Khi tôi tìm thấy một giải pháp thích hợp cho việc này, tôi sẽ cung cấp cho bạn một bản cập nhật

Anujith

9.3296 huy hiệu vàng32 Huy hiệu bạc47 Huy hiệu đồng6 gold badges32 silver badges47 bronze badges

Đã trả lời ngày 26 tháng 4 năm 2013 lúc 14:27Apr 26, 2013 at 14:27

1

Làm thế nào để bạn tiêm dữ liệu trong HTML?

Làm thế nào để bạn tiêm văn bản trong HTML?

Tiêm HTML được thực hiện như thế nào?

Làm thế nào để bạn thêm HTML vào HTML?