JS Динамически добавляет элементы (div, li, img и т. Д.) и методы для установки свойств

Назначьте строку тегов HTML с переменной JavaScript. В дополнение к сбежавшим двойным кавычкам значения атрибута, строка все еще очень длинная и кажется немного сложной в какой -то момент. Если вы динамически добавляете элементы с JS, таких сложных строк не будет, а код более читабелен и прост для понимания.

Веб -страницы состоит из уровня HTML -тегов по слою, а JS также может динамически добавлять слои тегов, таких как Div, Li и IMG. На самом деле, независимо от того, что это за тег HTML, метод динамического создания JS похож. Затем начните с динамического добавления DOV.

1. Добавить элементы дивизий динамически в JS

 <div id = "parent"> </div> function addelementDiv (obj) {var parent = document.getElementById (obj); // добавить div var div = document.createElement ("div"); // Установить атрибут div, такой как id div.setattribute ("id", "newdiv"); div.innerhtml = "js динамически добавить div"; parent.appendchild (div); }

Call: addelementDiv ("Родитель");

2. Динамически добавить LI в JS

 <ul id = "parentul"> <li> Оригинал li </li> </ul> функция addelementli (obj) {var ul = document.getElementbyid (obj); // добавить li var li = document.createElement ("li"); // Установить атрибут LI, такой как id li.setattribute ("id", "newli"); li.innerhtml = "js динамически добавить li"; Ul.AppendChild (li); }

Call: addelementli ("parentul");

3. Добавить элементы динамически в JS EMG

 <ul id = "parentul"> </ul> функция addelementimg (obj) {var ul = document.getElementbyId (obj); // добавить li var li = document.createElement ("li"); // Добавить img var img = document.createElement ("img"); // Установить атрибут IMG, такой как id img.setattribute ("id", "newimg"); // Установить адрес IMG Image Imgre Img.src = "/images/prod.jpg"; li.appendchild (IMG); Ul.AppendChild (li); }

Звонок: addelementimg ("parentul");

Приведенная выше статья о JS Динамически добавление элементов (Div, Li, IMG и т. Д.) И настройки атрибутов - это все контент, которым я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.