Làm thế nào để lưu trữ một đoạn mã HTML và chèn nó sau này trong tài liệu?

Question

Có cách nào để lưu trữ một đoạn mã HTML trong một biến bằng cách sử dụng Javascript hoặc jQuery như thế này? (Rõ ràng đó là một tổ chức phi làm việc một ví dụ)

var mysnippet = << EOF 
<div class="myclass"> 
    <div class="anotherclass"> 
    Some dummy text 
    </div> 
</div> 
EOF 

Và sau đó chèn nó trong tài liệu sử dụng jQuery:

mysnippet.append($('#someelement')); 

EDIT:

Xin vui lòng, đọc trước khi trả lời của nhận xét: Những gì tôi có là một đoạn mã HTML thô bên trong tệp JS của tôi và tôi cần lưu trữ nó trong biến Javascript bằng cách sử dụng thứ gì đó giống như tại công trình EOF. Tôi cần tránh đặt nó giữa các dấu ngoặc kép.

Nếu không thể sử dụng Javascript và/hoặc jQuery, thì câu hỏi không có giải pháp.

Answer 1

Bạn có thể sử dụng các mẫu javascript như ejs, haml-coffee ...

Answer 2

Chỉ nhận mã HTML của div bạn muốn theo var content = $('#somediv').html(); và sau đó nối nó vào một số div sau này! $('#otherdiv').append(content);

$().html(); cung cấp Nội dung HTML của div đó. tài liệu: http://api.jquery.com/html/

$().append(<content>); nối Nội dung vào div đặc biệt. documentatoin: http://api.jquery.com/append/

Answer 3

Yes. Fiddle example

Javascript

var html = '<b>Bold</b>' 
$('.anotherclass').append(html); 

HTML

<div class="myclass"> 
    <div class="anotherclass"> 
    Some dummy text 
    </div> 
</div> 

Answer 4

Bạn có thể viết:

var mysnippet = "<div class='myclass'>"+ 
    "<div class='anotherclass'>"+ 
    "Some dummy text"+ 
    "</div>"+ 
"</div>"; 

và sau đó chèn được sử dụng append chức năng (mất đoạn như là đối số).

Answer 5

Rất tiếc, không có gì giống như << EOF khả dụng. Dưới đây là một giải pháp:

$el = $('<div />') 
    .addClass('myClass') 
    .append(
    $('<div />') 
     .addClass('anotherclass') 
     .text('Foo Bar') 
); 

Answer 6

Suy nghĩ về cùng một vấn đề tôi đã tìm thấy cuộc thảo luận này. Những gì tôi có trong tâm trí là để đặt một ẩn textarea, có chứa html, và sau đó lấy html từ đó.

Do đó sẽ không có xung đột với id DOM kép, vì nội dung textarea không được hiển thị dưới dạng html.

Answer 7

Đối với những người gặp phải vấn đề này ... Bạn có thể sử dụng thẻ <template> mới trong HTML5. Nó vẫn không lưu trữ HTML trong JavaScript không may: (