Добавляем...


Вставка и добавление узлов
Объект Node поддерживает два метода для вставки содержимого: insertBefore (новыйДочерний, имеющийсяДочерний) и appendChild (новыйДочерний). Если в качестве метода узла вызывается appendChild(), узел новыйДочерний добавляется в конец списка дочерних узлов. В случае вызова insertBefore() узел новыйДочерний вставляется перед узлом имеющийсяДочерний. На практике часто приходится сначала получить доступ к родительскому узлу того узла, для которого будет вызываться insertBefore(), чтобы выяснить необходимые ссылки. Давайте рассмотрим пример применения метода appendChild() для объединения двух только что созданных узлов.

newNode = document.createElement('b');
newText = document.createTextNode("Добавляемый текст.");
newNode.appendChild(newText) ;

Теперь мы должны иметь следующий фрагмент (X)HTML:

<Ь>Добавляемый текст.</Ь>

Можно добавить эту разметку в документ, отыскав подходящее для вставки место. Например, можно использовать

current = document.getElementById('pl');
current.appendChild(newNode);

чтобы добавить выделенный полужирным шрифтом текстовый фрагмент в конец абзаца. Следующий программный код демонстрирует более сложные варианты использования вставки и добавления, когда введенный пользователем текст размещается до указанного элемента, в его пределах или за ним:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DOM Adding</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">
<!--
function makeNode(str)
{
var newParagraph = document.createElement("p");
var newText = document.createTextNode(str);
newParagraph.appendChild(newText);
return newParagraph;
}
function appendBefore(nodeId, str)
{
var node = document.getElementById(nodeId);
var newNode = makeNode(str);
if (node.parentNode)
node.parentNode.insertBefore(newNode,node);
}
function insertWithin(nodeId, str)
{
var node = document.getElementById(nodeId);
var newNode = makeNode(str);
node.appendChild(newNode);
}
function appendAfter(nodeId, str)
{
var node = document.getElementById(nodeId);
var newNode = makeNode(str);
if (node.parentNode)
{
if (node.nextSibling)
node.parentNode.insertBefore(newNode, node.nextSibling);
else
node.parentNode.appendChild(newNode);
}
}
//-->
</script>
</head>
<body>
<h1>DOM Insert and Append</h1>
<hr />
<div style="background-color:#66ff00;">
<div id="innerDiv" style="background-color:#ffcc00;"></div>
</div>
<hr />
<form id="form1" name="form1" action="#" method="get">
<input type="text" id="field1" name="field1" />
<input type="button" value="До" onclick="appendBefore('innerDiv',document.form1.field1.value);" />
<input type="button" value="Вовнутрь" onclick="insertWithin('innerDiv',document.form1.field1.value);" />
<input type="button" value="После" onclick="appendAfter('innerDiv',document.form1.field1.value);" />
</form>
</body>
</html>


добавить комментарий
(без перезагрузки и регистрации)


10 случайных разделов

Что ищем на сайте ?


Примеры кода на сайте







@ 2008-2011 Amber
При использовании материалов ссылка на сайт обязательна
Яндекс.Метрика