Как обновить содержимое одного div

Я реализую простую веб-страницу, на этой странице у меня есть несколько объектов div, то, что я пытаюсь сделать, это обновить содержимое одного div на основе пользователь нажимает кнопку или вводит текст в поле ввода.Как обновить содержимое одного div

До сих пор я нашел решения в Интернете, которые применимы к php, о которых я не знаю ничего честного, может ли кто-нибудь предоставить мне решение с использованием javascript или jquery и простого html?

источник

2011-12-29 KamalSalem

, что вы пытались до сих пор? –

Вы собираетесь каким-то образом сохранить информацию или просто хотите манипулировать DOM на основе некоторого ввода пользователем? Если вы собираетесь хранить информацию, вам придется посмотреть на какой-то серверный код, например PHP, ASP.Net или аналогичный. –

это должно быть возможно, но вы можете более подробно рассказать о своем вопросе в плане структуры страницы. Есть ли одно текстовое поле для страницы или это одно текстовое поле на div? – martincarlin87

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

document.getElementById("ponies").innerHTML = '<p>new html block</p>'

Если вы хотите поменять оттуда Диво содержимое на другой, вы можете выбрать вместо того, чтобы изменить дерево DOM с помощью createChild после div, а затем удалить div. Подход innerHTML, хотя и понятен, является немного тупым (и медленным) инструментом по сравнению с модификацией самой DOM. Но если вы делаете это редко, а html прост, кому это нужно?

Если у вас есть форма входа для личного имени, то вы можете сделать:

function showForename(forenameDiv) { 
    var text = "<p>Your forename is " + document.getElementById(forenameDiv).text + "</p>"; 
    document.getElementById("ponies").innerHTML = text; 
}

И поставить вызов в OnClick событие кнопки:

<input type="button" value="Who am I?" onclick="showForename('forenameinput')" />

Где forenameinput это идентификатор личного имени форма ввод. Чтобы узнать больше обо всем этом, посмотрите на w3schools website.

источник

2011-12-29 12:33:14

Я думаю, мне нравится идея здесь, теперь еще 2 вопроса: (1) как я могу ввести переменные в этот новый html для встраивания ввода пользователя и (2) Я использую OOP, так как я могу применить этот код на событие нажатия кнопки? Заранее спасибо – KamalSalem

Это зависит от того, что вы хотите сделать, я добавил некоторые детали для простого случая. –

пример с JQuery:

$("input.button").click(function(){ 
    $('div#content').load('ajax/test.php', function() { 
     console.log('loaded.'); 
    }); 
});

источник

2011-12-29 12:33:13

на основе @PhilH сек ответ здесь уборщик решение JQuery:

jQuery('#yourInput').click(function(){ 
    jQuery('#ponies').text('You wrote: ' + this.value); 
});

Даже в Jquery вы можете ввести в чистый HTML, если вы хотите:

jQuery('#yourInput').click(function(){ 
    jQuery('#ponies').html('<span>You wrote: <b>' + this.value + '</b></span>'); 
});

источник

2011-12-29 12:43:48 Matmarbon

Как обновить содержимое одного div

ответ

Смежные вопросы