Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   добавление содержимого элемента в другой (https://javascript.ru/forum/jquery/41771-dobavlenie-soderzhimogo-ehlementa-v-drugojj.html)

dikucher 28.09.2013 21:35

добавление содержимого элемента в другой
 
день добрый
А как добавить к элементу блок, только ссылаясь на него, т.е. у нас где то есть блок ( он может быть большим, поэтому и не хочется его весь добавлять в код JS)

<div class="new-block">
                <!-- здесь большой код, на который нужно заменить -->
</div>
<div class="old-block">
               <!-- старый код ,который мы хотим заменить -->
</div>



и вот примерный код скрипт , но что то явно не так, т.е. мне нужно чтобы скрипт выделял сам содержимое .new-block и вставлял его в очищенный .old-block
я думаю вы поймете мою мысль, не смотря на то, что код кривой

$(".old-block").empty().html($(".new-block".html());

ksa 28.09.2013 23:39

dikucher, как вариант...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
-->
<style type="text/css">
.new-block {
	border: 1px solid red;
}
.old-block {
	border: 1px solid green;
}
</style>
<script type="text/javascript">
$(function (){
	$('button').click(function (){
		$('.old-block').append($('.new-block > *'));
	});
});
</script>
</head>
<body>
<div class="new-block">
	<p>test</p>
	<p>test</p>
</div>
<div class="old-block">
</div>
<button>Go</button>
</body>
</html>

dikucher 29.09.2013 00:12

ksa,
вот что мне надо
<div class="new-block">
    <p>text</p>
</div>
<div class="old-block">
    <img alt="" src="">
</div>

Вот, что должно быть после действия скрипта ( ваш так будет работать ? у меня кстати он ничего не делает )
<div class="old-block">
    <p>text</p>
</div>


п.с. я все таки думал это сделать на функции .html, но не знаю как прописывать синтаксис, как я уже набросал выше.
Вот что работает
$(".old-block").empty().html('<p>text</p>');

Это фактически сделает, то что мне требуется, т.е. очищает .old-block и прописывает там новый элемент <p>text</p>. Но мне нужно более оптимальнее, чтобы можно было как то ссылаться на блок, так как он может быть большим, и мне не хочется его прописывать в script-е

ksa 29.09.2013 00:22

Цитата:

Сообщение от dikucher
у меня кстати он ничего не делает )

Это враньё... :D
Он работает прямо тут в теме.

ksa 29.09.2013 00:25

Цитата:

Сообщение от dikucher (Сообщение 274085)
вот что мне надо
<div class="new-block">
    <p>text</p>
</div>
<div class="old-block">
    <img alt="" src="">
</div>

Вот, что должно быть после действия скрипта ( ваш так будет работать ?
<div class="old-block">
    <p>text</p>
</div>

Для достижения желаемого, тебе нужно будет очистить содержимое old-block
Как это делать ты вроде знаешь...

ksa 29.09.2013 00:26

Цитата:

Сообщение от dikucher
я все таки думал это сделать на функции .html

Хозяин - барин... :D

dikucher 29.09.2013 02:08

Цитата:

Сообщение от ksa (Сообщение 274091)
Это враньё... :D
Он работает прямо тут в теме.

вы меня не поняли, я имел ввиду, что у меня она не работает ( тут безусловно не обходится без моих кривых рук ), я ваш код сразу перекраиваю под своё, и этот код ничего не делает.

<div class="block">
    <p>old content</p>
</div>
<div class="new-content">
    <p>new content</p>
</div>
<button class="button">go</button>


<script>
    $(function (){
        $('.button').click(function (){
            $('.block').append($('.new-content > *'));
        });
    });
</script>

dikucher 29.09.2013 02:20

вроде как нашел удовлетвлетворяющее для меня решение


<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>

<div class="block">
    <p>old content</p>
</div>
<div class="new-content">
    <p>new content</p>
</div>
<button class="button">go</button>

<script>
    $(function (){
        var con = $('.new-content');
        $('.button').click(function (){
            $('.block').empty().html(con);
        });
    });
</script>
</body>
</html>

dikucher 29.09.2013 02:23

вот не знаю как вы сделали так, чтобы можно было запускать напряму на форуме. Подскажите ?

По коду, может его будет правильнее написать как то по другому ?

ksa 29.09.2013 10:33

Цитата:

Сообщение от dikucher
как вы сделали так, чтобы можно было запускать напряму на форуме. Подскажите ?

Это описано тут на форуме...
http://javascript.ru/formatting


Часовой пояс GMT +3, время: 07:12.