Создание элементов внутри элементов с помощью javascript

Question

Noob здесь. Я искал в Интернете немного, чтобы найти ответ на вопрос, и я не могу найти никого (и это приносит мою надежду). И вот я здесь. Мне было интересно, есть ли способ создать элемент HTML с javascript, но внутри вновь созданного элемента HTML, чтобы создать еще один элемент HTML с javascript. Я думаю, вы можете назвать это elementception //

Чтобы быть более конкретным, я хотел бы создать абзац с текстом, но я хотел бы включить ссылки в этот текст (или, возможно, кнопки?).

var para = document.createElement("P"); 
var t = document.createTextNode("This is a paragraph. Can I do this: <a href='blabla'>like so?</a>"); 
para.appendChild(t); 
document.body.appendChild(para); 

Я пробовал писать теги HTML внутри строк TextNode, но даже я могу видеть, что это было глупо со мной. Существует ли noobish (простой) способ достичь этого или вообще вообще? Если я прошу невозможного, будьте грубы и грубы, я никогда не буду задавать вопросы. Спасибо.

Answer 1

Просто используйте innerHTML атрибут поместить HTML внутри элемента вместо createTexteNode, вот что вам нужно:

var para = document.createElement("P"); 
para.innerHTML = "This is a paragraph. Can I do this: <a \"blabla\">like so?</a>"; 
document.body.appendChild(para); 

Так как его имя говорит, что document.createTextNode() создаст только текст и не сможет создавать элементы HTML.

var para = document.createElement("P"); 
 
para.innerHTML = "This is a paragraph. Can I do this: <a href=\"blabla\">like so?</a>"; 
 
document.body.appendChild(para);

Answer 2

Самый простой способ сделать это было бы:

para.innerHTML = 'This is a paragraph. Here is a link: <a href="blabla">like so?</a>'; 

Answer 3

Я хотел бы использовать DOM API подход вместо использования innerHTML для удобочитаемости, ремонтопригодности и security reasons. Конечно, innerHTML существует уже давно, но просто потому, что это легко, это не значит, что вы должны использовать его для всего.

Также, если вы собираетесь изучать JavaScript, вы должны познакомиться с DOM API раньше, чем позже. Это сэкономит вам много головных болей в будущем, если вы теперь повесите API.

// Create the parent and cache it in a variable. 
 
var para = document.createElement("p"); 
 

 
// Create a text node and append it to the child. 
 
// We don't need to cache this one because we aren't accessing it again. 
 
para.appendChild(document.createTextNode("This is a paragraph. Can I do this: ")); 
 

 
// Create our link element and cache it in a variable. 
 
var link = document.createElement("a"); 
 

 
// Set the link's href attribute. 
 
link.setAttribute('href', 'blabla'); 
 

 
// Create a text node and append it to the link 
 
// We don't need to cache the text node. 
 
link.appendChild(document.createTextNode('like so?')); 
 

 
// Append the link to the parent. 
 
para.appendChild(link); 
 

 
// Append the parent to the body. 
 
document.body.appendChild(para);

методы DOM API используются:

• Document.createElement()
• Document.createTextNode()
• Node.appendChild()
• Element.setAttribute()

Дальнейшее чтение:

• Document Object Model (DOM)
• Element.innerHTML Security Considerations
• Advantages of createElement over innerHTML?