Форум

dikucher · #1 (**permalink**) 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 · #2 (**permalink**) 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 · #3 (**permalink**) 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 · #4 (**permalink**) 29.09.2013, 00:22

Сообщение от dikucher

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

Это враньё...

Он работает прямо тут в теме.

ksa · #5 (**permalink**) 29.09.2013, 00:25

Сообщение от dikucher

вот что мне надо

<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 · #6 (**permalink**) 29.09.2013, 00:26

Сообщение от dikucher

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

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

dikucher · #7 (**permalink**) 29.09.2013, 02:08

Сообщение от ksa

Это враньё...

Он работает прямо тут в теме.

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

<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 · #8 (**permalink**) 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 · #9 (**permalink**) 29.09.2013, 02:23

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

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

ksa · #10 (**permalink**) 29.09.2013, 10:33

Сообщение от dikucher

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

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

Форум

Справочник

Discord чат

Курсы javascript