Question

У меня есть строка HTML, и я хочу добавить в нее другую строку html в любом произвольном месте.

Пример:

var htmlString = '<div id="insert"> <p> Hello </p> </div>' 

var appendString = '<p> Goodbye </p>' 

$(appendString).appendTo($(htmlString).find('#insert')) 

Очевидно, что не работает, потому что он не может вставить непосредственно в строку, однако, я не хочу, чтобы преобразовать HTMLString в объект JQuery, потому что он портит структуру HTML документа и мне нужно, чтобы теги скрипта оставались в местах, где они были вставлены.

Надеюсь, что это достаточно ясно.

EDIT:

Мои извинения, я думаю, что я объяснил свою проблему плохо.

У меня есть строка HTML, которая содержит таблицу, и я хочу добавить новую строку в таблицу. Моя проблема в том, что у меня есть несколько тегов <script>, которые мне нужно оставить в своих местах. Когда я преобразовать строку в $ (строка), я тогда не смог вернуть его к своей первоначальной форме:

var htmlString = $('body').html(); 
var $htmlString = $(x); 
console.log($htmlString.html()); 

Это является Confluence страницы, которую я попытка сделать это, и я имею ограниченный доступ к источник; я могу только изменить то, что уже есть.

Строка HTML исходит из запроса AJAX другой страницы в Confluence, и мне нужны сценарии, чтобы оставаться в одном месте, чтобы другие мои макросы работали корректно.

Я включил пример JS Bin моей проблемы, чтобы, надеюсь, проиллюстрировать мою проблему четко.

https://jsbin.com/ruwawuzica/edit?html,js,output

Answer 1

Вы можете сделать это следующим образом:

var htmlString = '<div id="insert"> <p> Hello </p> </div>'; 
 

 
var appendString = '<p> Goodbye </p>'; 
 
var added = ($(htmlString).append($(appendString))); 
 
$(added).appendTo('div');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div></div>

Поскольку $(htmlString) является element<div id="insert"></div> завернутые в jquery

Answer 2

Привет @MyLittleDax я думаю, что вы можете сделать это:

var htmlString = "<div id='insert'> <p> Hello </p> </div>"; 
var appendString = "<p> Goodbye </p>"; 
//your container where you put the html 
var container = $('#container'); 
container.empty(); 
container.append(htmlString); 
var insert = $('#insert'); 
insert.append(appendString); 

удачи !!!