Js добавить HTML код

jsappend
Небольшая заметка о том как добавить HTML код на HTML страницу.



 
Начну сразу с кода:

1. понадобится библиотека:

<script src="/js/jquery.min.js" type="text/javascript></script>

2. самый простой код, имея эту библиотеку:

<script type="text/javascript>
 $('.inputmail').append('Какой угодно текст или любой код HTML <br>
<input type="text" class="calc" name="calc"><br>);
 </script>

3. общий упрощенный вид, допустим index.html или index.php:


<!DOCTYPE html>
<html lang="ru">
<head>
<title>вставка html кода</title>

<script src="/js/jquery.min.js" type="text/javascript"></script>
 </head>
 <body>

 <!--В этот DIV будет вставлятся наш произвольный HTML код-->
<div class="inputmail">
 </div>

 <script type="text/javascript"> 
$('.inputmail').append('Какой угодно текст или любой код HTML<br><input type="text" class="calc" name="calc"><br>');
 </script>


4. Теперь немножко подробностей:

$(‘.inputmail’) — здесь указывается класс переменной (в нашем случае это класс div), можно по id, будет выглядеть так — $(‘#inputmail’).

Метод .append() вставляет (добавляет) фрагмент HTML разметки или созданные на лету элементы, перемещение элементов не рассматриваю.
Также, конечно, в наш документ можно добавить кнопку на выполнение функции по её нажатии:


так будет выглядеть кнопка в html файле:
<span class="button" onclick="htmladd();">Добавить html</span>

 <script type="text/javascript"> 
 function htmladd{
 $('.inputmail').append('Какой угодно текст или любой код HTML<br><input type="text" class="calc" name="calc"><br>');
 }
 </script>



Оставить комментарий