document.getElementById('addtext').appendChild(document.createElement("div").appendChild(document.createTextNode("новый текст")));
document.getElementById('addtext').removeChild(document.getElementById('addtext').lastChild));
DOM - добавление и удаление текста в дескриптору!!!
Доброй ночи господа!
Вот код:
[HTML]<html>
<head>
<title>This is DOM</title>
</head>
<body>
<a href="#" onclick="document.getElementById('addtext').appendChild(createTextNode(' новый текст'))">добавить текст</a>
<a href="#" onclick="document.getElementById('addtext').removeChild(???что сюда писать???)">удалить текст</a>
<p id="addtext">Просто текст.</p>
</body>
</html>[/HTML]
Кнопка "добавить текст" с успехом работает, а вот удалить "текст не работает". Я как понимаю есть функция removeChild(???) а вот как написать в скобках этой функции что нужно удалить последний внедренный текст???
Помогите плиззз!!!
Вот код:
[HTML]<html>
<head>
<title>This is DOM</title>
</head>
<body>
<a href="#" onclick="document.getElementById('addtext').appendChild(createTextNode(' новый текст'))">добавить текст</a>
<a href="#" onclick="document.getElementById('addtext').removeChild(???что сюда писать???)">удалить текст</a>
<p id="addtext">Просто текст.</p>
</body>
</html>[/HTML]
Кнопка "добавить текст" с успехом работает, а вот удалить "текст не работает". Я как понимаю есть функция removeChild(???) а вот как написать в скобках этой функции что нужно удалить последний внедренный текст???
Помогите плиззз!!!
Создавай новый текстовый узел внутри какого-нибудь элемента, например, div'а
Например:
Либо можно запоминать дескрипты создаваемых текстовых узлов в массиве
Например:
Код:
Либо можно запоминать дескрипты создаваемых текстовых узлов в массиве
спасибо за совет, сам разобрался, правда без нового элемента. Правда теперь у меня возник вопрос, если в кнопке ДОБАВИТЬ я указываю просто appendChild(create..), то в кнопке УДАЛИТЬ приходится опять же как бы прописывать второй раз [COLOR="Red"]document.getElementById('addtext')[/COLOR].lastChild
То есть меня смущает то что выделено красным:confused:
[HTML]<html>
<head>
<title>This is DOM</title>
</head>
<body>
<a href="#" onclick="document.getElementById('addtext').appendChild(createTextNode(' новый текст'))">добавить текст</a>
<a href="#" onclick="document.getElementById('addtext').removeChild(document.getElementById('addtext').lastChild)">удаляем</a>
<p id="addtext">Просто текст.</p>
</body>
</html>[/HTML]
То есть меня смущает то что выделено красным:confused:
[HTML]<html>
<head>
<title>This is DOM</title>
</head>
<body>
<a href="#" onclick="document.getElementById('addtext').appendChild(createTextNode(' новый текст'))">добавить текст</a>
<a href="#" onclick="document.getElementById('addtext').removeChild(document.getElementById('addtext').lastChild)">удаляем</a>
<p id="addtext">Просто текст.</p>
</body>
</html>[/HTML]
Чем же оно тебя смущает?
а почему тада перед методом createTextNode не стоит то что выделено красным, вот собсвенно вопрос:)
и еще вопрос по теме:
<a href="#" onclick="document.getElementById('addelement').appendChild(document.createElement('div').[color=red]style.backgroundColor = 'red'[/color]).appendChild(document.createTextNode(' new DIV'))">добавляем DIV</a><br><br>
<table cellpadding="0" cellspacing="0" border="1">
<tr>
<Td>
<p id="addelement"><b>добавляем элемент</b></p>
</td>
</tr>
</table>
када добавляю новый атрибуд к тегу DIV (выделено красным), код перестает работать.
Странно вроде в нужное место засовываю.
Обычно ведь это делается так document.getElementByID('ID').style.атрибут = 'значение атрибуда'
В чем моя ошибка :confused:
<a href="#" onclick="document.getElementById('addelement').appendChild(document.createElement('div').[color=red]style.backgroundColor = 'red'[/color]).appendChild(document.createTextNode(' new DIV'))">добавляем DIV</a><br><br>
<table cellpadding="0" cellspacing="0" border="1">
<tr>
<Td>
<p id="addelement"><b>добавляем элемент</b></p>
</td>
</tr>
</table>
када добавляю новый атрибуд к тегу DIV (выделено красным), код перестает работать.
Странно вроде в нужное место засовываю.
Обычно ведь это делается так document.getElementByID('ID').style.атрибут = 'значение атрибуда'
В чем моя ошибка :confused:
Чего же ты все лепишь в одну строчку? Сделай функцию и все будет
По поводу ELEMENT.style.backgroundColor = 'red'. Это верно. Но результатом данного выражение является не элемент а булев тип(здесь true). Соответственно, все что после этого - не валидное и приводит к ошибкам. Если есть желание извратится и написать все это в одну строчку, то можно попробовать нечто вроде:
....(((EL = document.createElement('div') ? EL.style.backgroundColor = 'red' ? EL : null : null)).appendChild(...)
За работоспособность примера не ручаюсь, но надеюсь тебе понятно что такой метод изврат чистой воды, когда все можно выполнить в отдельной функции
p.s: а тебя не смущает тогда string.charAt(string.length)?
По поводу ELEMENT.style.backgroundColor = 'red'. Это верно. Но результатом данного выражение является не элемент а булев тип(здесь true). Соответственно, все что после этого - не валидное и приводит к ошибкам. Если есть желание извратится и написать все это в одну строчку, то можно попробовать нечто вроде:
....(((EL = document.createElement('div') ? EL.style.backgroundColor = 'red' ? EL : null : null)).appendChild(...)
За работоспособность примера не ручаюсь, но надеюсь тебе понятно что такой метод изврат чистой воды, когда все можно выполнить в отдельной функции
p.s: а тебя не смущает тогда string.charAt(string.length)?
Цитата: Anton Kharlamov
и еще вопрос по теме:
<a href="#" onclick="document.getElementById('addelement').appendChild(document.createElement('div').[color=red]style.backgroundColor = 'red'[/color]).appendChild(document.createTextNode(' new DIV'))">добавляем DIV</a><br><br>
<table cellpadding="0" cellspacing="0" border="1">
<tr>
<Td>
<p id="addelement"><b>добавляем элемент</b></p>
</td>
</tr>
</table>
када добавляю новый атрибуд к тегу DIV (выделено красным), код перестает работать.
<a href="#" onclick="document.getElementById('addelement').appendChild(document.createElement('div').[color=red]style.backgroundColor = 'red'[/color]).appendChild(document.createTextNode(' new DIV'))">добавляем DIV</a><br><br>
<table cellpadding="0" cellspacing="0" border="1">
<tr>
<Td>
<p id="addelement"><b>добавляем элемент</b></p>
</td>
</tr>
</table>
када добавляю новый атрибуд к тегу DIV (выделено красным), код перестает работать.
И правильно не будет работать. Пытаешь изменить свойство элемента, которого еще нет в DOM текущего документа. Если не хочишь постоянно наталкивать на косяки пиши многострочный код и только потом сворачиваего его в одну строку. И на каждом шаге (читай для каждой строки) котролируй что тебе возращает та или иная функция (теме же alert-ами). Кстати делать это все лучше в Opera, там в alert-ах очень удобно организованны возращаемые значения.
document.createElement('div') возвращает элемент, изменять свойства которого можно и не внося в ДОМ документа
