JQuery .html () печатать точный HTML-код - PullRequest
Новая
       9

JQuery .html () печатать точный HTML-код

2 голосов
/ 11 февраля 2011

У меня есть текстовая область, которую я заполняю кодом html для людей, из которых можно вырезать и вставить.Эта текстовая область «заполняется» с использованием JQuery и .html ().с "популяцией", взятой из <div> в другом месте на примере страницы:

Div, который "содержит" популяцию "

<div id="populationhold">this is the html to copy</div>

, затем" магию JQ ", чтобы" щелкнуть "нажмите и заполните текстовое поле 

$('#button').click(function(){ 
updatefunction();
});

, а функция обновления выглядит примерно так: 

function updatefunction(){
$('#textarea').html( $('#populationhold').val(); });
}

Теперь, если я попытаюсь заполнить что-то вроде этого: 

$('#textarea').html( 'this is the <br />html to copy');

.Html () будет печатать только <br> НЕ <br />. Я пытался (по-моему, экранировать с <br \/>, но это не так. Предложения, пожалуйста, поскольку я должен «производить» чистый код XHTML, а не толькоHTML4 код

Следующий бит, вероятно, такой же, но немного более сложный - отсюда и приведенное выше приведение к этому.

Как "пользователь" моего сайта, вы сможетечтобы добавить / удалить биты из примера кода: 

<div id="populationhold">
<div class="codebit1">this is the <br />html to copy</div>
\n<br/>\
<div class="codebit2">this is more <br />html to copy</div>
</div>

$('#button').click(function(){ 
$('#textarea').html( $('#populationhold').val(); 
});

Заполнение текстовой области в порядке и работает, как и "90%" удаления. Это что-то вроде этого: 

$('#deletebutton').click(function(){     
$('.codebit1').remove(); 
// This removes .codebit1 from #populationhold and runs the update to ummm update the textarea with the update function 
// Note: remove() is OK in this case as #codebit1 is totally dynamically created
updatefunction();
});

Вопрос здесь в порядке, я могу удалить / удалить биты, которые нужно удалить - отсюда и «90%», но как я могу избавиться от"теперь сирота" \n<br/>\n, которая раньше разделяла 2 элемента в #textarea.Хорошо, я могу сделать это без \n<br/>\n, но это делает код для копирования "неопрятным" на глаз, поэтому \n<br/>\n есть - также \n<br/>\n гарантирует, что когда код фактически скопирован, пользователь получаетразумный макет.

1 Ответ

1 голос
/ 11 февраля 2011

То, что вы делаете, не правильно, я думаю.

A <textarea> - многострочный объект ввода. Итак, вы не хотите использовать функцию $('#textarea').html() (я не думаю, что она существует даже для <textarea>), но вы хотите использовать функцию $('#textarea').val() для обновления ее содержимого.

Если вы сделаете $('#textarea').val( 'this is the <br />html to copy'), вы получите правильный результат.

С другой стороны, вы хотите использовать .html() вместо .val() для объекта $('#populationhold'), так как вы извлекаете его значение и его дочерние элементы.

О innerHTML и XHTML

XHTML и innerHTML не являются друзьями. Они просто не работают вместе. Если вы подадите документ в формате xhtml / xml, у вас возникнут проблемы. Это не имеет смысла, innerHTML в XML. 

<element>value
 <child>childvalue</child>
</element>

innerHTML - это просто функция, которая получает значение элемента, а затем объединяет его имя и значение для детей ... Это всего лишь некоторые манипуляции со строками.

Полу раствор

Стив Такер создал функцию innerXHTML . Вы можете увидеть это работает здесь:

http://jsfiddle.net/pYUD4/10/

Однако есть одна вещь, которую вы получаете <br />, переведенную на <br></br>, но, насколько мне известно, это действительно XHTML. Я постараюсь написать функцию, которая хорошо выполняет эту работу, потому что, похоже, сейчас нет способа сделать это. Но это может занять некоторое время xD

...