Динамически создавать элементы HTML с использованием Javascript? - PullRequest
Новая
       16

Динамически создавать элементы HTML с использованием Javascript?

7 голосов
/ 04 апреля 2011

Я хочу динамически создать некоторые HTML-элементы (3 HTML-элемента), а затем вернуть этот HTML-код в виде строки в переменной. Я не хочу писать HTML-код в следующей функции в некоторый div, но я хочу вернуть его в переменной. 

function createMyElements(id1,id2,id3){

   //create anchor with id1
   //create div with id 2
   //create xyz with id3

  //now return the html code of above created just now

}

Как я могу это сделать?

Ответы [ 5 ]

11 голосов
/ 04 апреля 2011

Вы можете создать элемент, используя document.createElement. После создания вы можете добавить атрибуты. Если вы хотите, чтобы элемент отображался в вашем документе, вы должны вставить его в DOM-дерево документа. Попробуйте поиграть с этим кодом: 

var body = document.getElementsByTagName('body')[0],
    newdiv = document.createElement('div');   //create a div
    newdiv.id = 'newid';                      //add an id
    body.appendChild(newdiv);                 //append to the doc.body
    body.insertBefore(newdiv,body.firstChild) //OR insert it

Если вам нужен только html, это подход: 

function createmyElements(id1,id2,id3){
   return [
           '<a href="some link" id="',
            id1,
           '">linktxt</a>',
           '<div id="" ',
            id2,
           '"></div>',
           '<someElement id="',
            id3,
           '"></someElement>'
          ].join('\n');
}

Еще один подход заключается в создании div без внедрения его в дерево DOM и добавления к нему элементов с использованием методов DOM. Вот функция для создания 1 элемента 

function createElementHtml(id,tagname){
  var containerdiv = document.createElement('div'),
      nwtag = document.createElement(tagname);
  nwtag.id = id;
  containerdiv.appendChild(nwtag);
  return containerdiv.innerHTML;
}
//usage
createElementHtml('id1','div'); //=> <div id="id1"></div>
3 голосов
/ 04 апреля 2011

Вы можете построить html как строку в одной переменной, например 

var html = "";
html += "<a id='" + id1 +"'>link</a>";
html += "<div id='" + id1 +"'>div</div>";
// ... and so on

, затем вы вернете переменную html 

return html;
2 голосов
/ 30 марта 2017

Вот простая иллюстрация для преобразования html-страницы (статической) в html-страницу на основе javascript (динамической).

Допустим, у вас есть html-страница как "index.html" (здесь вызывается index_static.html).

index_static.html

<!DOCTYPE HTML>
<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <h1> Hello !!! </h1>
    </body>
</html>

Вы можете открыть этот файл в браузере, чтобы увидеть желаемый результат.

Теперь давайте создадим javascript, эквивалентный этому. Используйте online-tool , чтобы сгенерировать источник javascript (вставив в него указанный выше источник html-файла). Следовательно, оно выглядит следующим образом:

dynamic.js

document.write("<!DOCTYPE HTML>");
document.write("<html>");
document.write("    <head>");
document.write("        <title>Test<\/title>");
document.write("    <\/head>");
document.write("    <body>");
document.write("        <h1> Hello !!! <\/h1>");
document.write("    <\/body>");
document.write("<\/html>");

И теперь ваша динамическая версия static_index.html будет выглядеть так:

index_dynamic.html

<script language="JavaScript" src="dynamic.js"></script>

Откройте index_dynamic.html в браузере, чтобы проверить веб-страницу (хотя и динамически, по ходу дела).

подробнее

2 голосов
/ 04 апреля 2011

Html: 

<div id="main"></div>

JavaScript: 

var tree = document.createDocumentFragment();
var link = document.createElement("a");
link.setAttribute("id", "id1");
link.setAttribute("href", "http://site.com");
link.appendChild(document.createTextNode("linkText"));

var div = document.createElement("div");
div.setAttribute("id", "id2");
div.appendChild(document.createTextNode("divText"));

tree.appendChild(link);
tree.appendChild(div);
document.getElementById("main").appendChild(tree);

Основной причиной использования documentFragment вместо простого добавления элементов является скорость выполнения.

При таком размере это не имеет значения, но когда вы начнете добавлять сотни элементов, вы сначала оцените это в памяти: -)

С помощью documentFragment вы можете создать целое дерево DOM-элементов в памяти и не затрагивать DOM браузера до последнего момента.

В противном случае он заставляет браузер обновляться для каждого элемента, что иногда может быть очень трудно наблюдать.

0 голосов
/ 11 апреля 2019

Если вы делаете это неоднократно (динамически создавая HTML), вы можете использовать более общий подход.

Если вы хотите создать три несвязанных элемента, вы можете сделать: 

var anchor = elem("a", {"id":"id1"});
var div    = elem("div", {"id":"id2"});
var xyz    = elem("div", {"id":"id3"});

Теперь у вас есть три элемента. Если вы хотите получить их HTML (в виде строки), просто выполните: 

var html = anchor.outerHTML + div.outerHTML + xyz.outerHTML;

Если вы хотите иметь эти три элемента (скажем, div), выполните: 

var div = elem("div", null, [
    elem("a", {"id":"id1"}),
    elem("div", {"id":"id2"}),
    elem("div", {"id":"id3"}),
]);

Вы можете получить HTML с помощью div.outerHTML, или вы можете просто добавить его в любое место.

Чтобы узнать больше о elem(), посетите element.js (GitHub) .

Я добавляю этот ответ не для 8-летнего вопроса, а для будущих посетителей. Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...