Скопировать HTML код с одного id в другой
Здравствуйте!
Возник такой вопрос, каким методом скопировать содержимое внутри конкретного идентификатора и поместить его в другой ? При этом нужно копировать не только текст но и весь HTML код. <html> <head> </head> <body> <td id="code"> <a style="text-decoration:underline" href="javascript:void(0);"><b>Код</b></a>: 0123456789 <span>•</span> <b><a style="text-decoration:underline" href="javascript:void(0);">Е-код</a></b>: 0123-456-789<br> </td> <td id="copy"></td> </body> </html> т.е. нужно копировать содержимое id="code" и вставить в id="copy" Возможно ли подобное ? Подскажите куда копать. |
Цитата:
<style>
#Wrp2 {
border:2px solid red;
height:56px;
width:200px;
}
#Myelem {
border:1px solid blue;
width:160px;
}
</style>
<div id="Myelem">sasddsf</div>
<div id="Wrp2">tttttttttttf</div>
<script type="text/javascript">
Elem = document.getElementById('Myelem');
WrapNewPos = document.getElementById('Wrp2');
setTimeout('WrapNewPos.appendChild(Elem)',3000)
</script>
|
Добавить текст во второй узел:
<div id="code">foo</div>
<div id="copy">bar</div>
<script>
var code = document.getElementById('code');
var copy = document.getElementById('copy')
copy.innerHTML = code.innerHTML;
</script>
|
Deff, спасибо, но вашь пример перемещает один идентификатор во второй, а не копирует.
нужно чтоб в итоге страница стала такой: <html> <head> </head> <body> <td id="code"> <a style="text-decoration:underline" href="javascript:void(0);"><b>Код</b></a>: 0123456789 <span>•</span> <b><a style="text-decoration:underline" href="javascript:void(0);">Е-код</a></b>: 0123-456-789<br> </td> <td id="copy"> <a style="text-decoration:underline" href="javascript:void(0);"><b>Код</b></a>: 0123456789 <span>•</span> <b><a style="text-decoration:underline" href="javascript:void(0);">Е-код</a></b>: 0123-456-789<br> </td> </body> </html> monolithed, вообще не в ту сторону, но за проявленный интерес спасибо =) |
Цитата:
Я вам привел пример как решить вашу задачу, а вы уже сами должны заменить идентификаторы |
Цитата:
<style>
#Wrp2 {
border:2px solid red;
height:56px;
width:200px;
}
#Myelem {
border:1px solid blue;
width:160px;
}
</style>
<div id="Myelem">sasddsf</div>
<div id="Wrp2">tttttttttttf</div>
<script type="text/javascript">
Elem = document.getElementById('Myelem').cloneNode(true);
WrapNewPos = document.getElementById('Wrp2');
setTimeout('WrapNewPos.appendChild(Elem)',3000)
</script>
|
Deff,
Hужно скопировать содержимое первой ноды во вторую, а не сделать копию первой |
monolithed,
Там с задержкой просто
<style>
#Wrp2 {
border:2px solid red;
height:56px;
width:200px;
}
#Myelem {
border:1px solid blue;
width:160px;
}
</style>
<div id="Myelem">sasddsf</div>
<div id="Wrp2">tttttttttttf</div>
<script type="text/javascript">
Elem = document.getElementById('Myelem').cloneNode(true);
WrapNewPos = document.getElementById('Wrp2');
var str = 'HTML родителя:\n\n'
setTimeout('WrapNewPos.appendChild(Elem);alert(str+WrapNewPos.innerHTML)',1500)
</script>
<style>
#Wrp2 {
border:2px solid red;
height:56px;
width:200px;
}
#Myelem {
border:1px solid blue;
width:160px;
}
</style>
<div id="Myelem">sasddsf</div>
<div id="Wrp2">tttttttttttf</div>
<script type="text/javascript">
Elem = document.getElementById('Myelem').cloneNode(true);
WrapNewPos = document.getElementById('Wrp2');
var X = document.createElement('div')
X.appendChild(Elem);
var HTML = X.innerHTML;
WrapNewPos.innerHTML=HTML;
alert('HTML родителя:\n\n'+WrapNewPos.innerHTML);
</script>
|
Deff,
Я имею ввиду что должно быть так:
<div id="code">
<div>
<div>foo</div>
</div>
</div>
<div id="copy"></div>
<script>
var code = document.getElementById('code');
var copy = document.getElementById('copy')
Array.prototype.forEach.call(code.childNodes, function(node) {
copy.appendChild(node.cloneNode(true));
});
</script>
|
monolithed,
Думаю разберётся - примеров масса Тут два часа пытался капчу на Хабре превозмочь, так и не понял что произошло, пока комп не перезагрузил, - ужос! |
Цитата:
И на сколько я понял работает только с <div> с моим примером тоже не работает и с этим уже не чего не поделаешь верно ? |
Цитата:
|
Цитата:
Не совсем догнал суть вашего поста ? Если пытались навести на мысль то её тоже не уловил, пожалуйста можно подробнее ? |
Цитата:
<style>
#Wrp2 {
border:2px solid red;
padding:6px;
width:200px;
}
#Myelem {
padding:6px;
border:1px solid blue;
width:160px;
}
p {
border:1px solid green;
padding:6px;
}
</style>
<div id="Myelem"><p>sasddsf</p></div>
<div id="Wrp2"><p>tttttttttttf</p></div>
<script type="text/javascript">
Elems = document.getElementById('Myelem').innerHTML;
WrapNewPos = document.getElementById('Wrp2');
WrapNewPos.innerHTML+=Elems;
alert('HTML родителя:\n\n'+WrapNewPos.innerHTML);
</script>
|
мда, я в шоке, все оказалось на столько просто.
Deff, спасибо. Такой вопрос, почему подобная конструкция не работает если вместо <div> использовать <tr> ? |
lamer,
Эээ конкретней можно - в таблицах элементы подключаются через tablecelllamer, у таблиц спецметоды .insertCell() insertRow() newrow newcell deleteRow() deleteCell() http://sevidi.ru/webd/dweb/javapage46.php |
Цитата:
<div id="code">
<div>
<div>foo</div>
</div>
</div>
<div id="copy"></div>
<script>
var move_child = function(object) {
var fragment = document.createDocumentFragment();
var nodes = object.from.childNodes;
for (var i = 0, length = nodes.length; i < length; i++)
fragment.appendChild(nodes[i].cloneNode(true));
object.to.appendChild(fragment);
};
move_child({
from: document.getElementById('code'),
to: document.getElementById('copy')
});
</script>
Цитата:
PS: только innerHTML я бы не посоветовал использовать если есть обрабочики событий на элементах |
Цитата:
|
| Часовой пояс GMT +3, время: 21:23. |