Как добавить пространство после элементов, добавленных с помощью jQuery
Я представляю подобную конструкцию к ниже с некоторым серверным кодом. Серверный код вставляет жесткие переводы строки, промежуточные маркировка проекта и текстовые поля. Не грандиозное предприятие кроме ниже кода jQuery вставляет маркировку проекта, и текстовые поля делали пюре вместе.
var projectLabel = $('<label for="project">Project</label>');
var projectField = $('<input type="text" name="project" id="projectName" />');
projectLabel.insertBefore($(this));
projectField.insertBefore($(this));
Из-за этого несоответствия представленная сторона сервера элементов имеет пространство между ними, в то время как те представленные на клиенте не делают. Я попытался добавить a в конце каждой строки напрасно. К сожалению, я не мог удалить жесткие переводы строки, произведенные серверным кодом. Далее из-за пространства я не могу зафиксировать это с CSS. Каковы мои опции для добавления интервала с помощью jQuery?
3 ответа
Когда код на стороне сервера создает это с пробелом между тегами label и input , он вставляет текст , который отправляется в браузер. Затем браузер интерпретирует этот текст (как HTML) и строит дерево DOM.
Когда вы используете insertBefore () в jQuery на стороне клиента, вы вставляете узлы DOM прямо в дерево.
Разница в том, что сгенерированный сервером текст в конечном итоге создает три родственных узла: метку, текстовый узел, затем ввод; в то время как клиентская сторона создает только два узла: только метку и ввод.
Если вы создаете текстовый узел с одним пробелом (он даже не обязательно должен быть не- разрыв пробела) и вставьте его между двумя другими узлами, он должен выглядеть так же.
projectLabel.insertBefore($(this));
textNode.insertBefore($(this));
projectField.insertBefore($(this));
Я не могу сказать вам, как создать текстовый узел в jQuery.
Может быть, что-то простое, например, добавление \ n в конец projectLabel и projectField при их построении?
Думаю, было бы полезно увидеть код на стороне сервера и результат. Я не уверен, пытаетесь вы получить место или нет. Если ваша цель состоит в том, чтобы они смешались друг с другом, попробуйте следующее:
Вы можете попробовать отформатировать ввод и метку следующим образом:
<label>Project<input type="text" name="project" id="projectName" /></label>
Или, когда вы создадите его, создайте его рядом друг с другом :
var projectLabelAndField = $('<label for="project">Project</label><input type="text" name="project" id="projectName" />');
projectLabelAndField.insertBefore($(this));