将 html 作为纯文本插入文本区域

Question

我正在尝试创建一个列表并将其结构作为纯文本添加到文本区域。以下内容有效，但它只是添加第一个输入：

.HTML

<div id="mindmap">
  <ul>
    <li><button type="button" class="btn btn-default ul-appending">+ Node</button>      </li>
  </ul>
</div>
<div id="mindMapData">
  <textarea col="10" rows="10"></textarea>
</div>

.JS

$('body').on('click', 'button.ul-appending', function() {
    $(this).parent().append(
    $('<ul class="main_ul">').addClass('newul sortable').append(
    $('<li><input placeholder="Link title" class="nome_link form-control" type="text"><input placeholder="Link" class="form-control link_url" type="text"></li>')
    )
    );
});
$('body').on('click', 'button.removeThis', function() {
    $(this).parent().parent().parent().remove();
});
function ul(indent) {
    indent = indent || 4;
  var node = $(this);
    return node.removeAttr('class').children().map(function() {
    var self = $(this);
    var value = self.find('> input').val();
    var sub_ul = self.find('> ul');
    var ul_spaces = new Array(indent+4).join(' ');
    var li_spaces = new Array(indent).join(' ');
    if (sub_ul.length && ul) {
        return li_spaces + '<li>' + value + 'n' + ul_spaces +
          '<ul class="sortable">n' + ul.call(sub_ul, indent+8) + 'n' + ul_spaces + '<ul>n' +
          li_spaces + '</li>';
    } else {
        return li_spaces + '<li><a href="'+ $(".link_url").text() + '">' + value + '</a></li>';
    }
  }).get().join('n');
}
function updateTree() {
   $("#mindMapData textarea").text('<ul class="sortable">n' + $("#mindMap").clone().find('.main_ul').map(ul).get().join('n') + 'n</ul>');
 }
$("#mindMap").on("DOMSubtreeModified", updateTree);
$("#mindMap").on('keyup', 'input', updateTree);

输出必须像

<li><a href="www.exampleA.com">My example A</a></li>
<li><a href="www.exampleB.com">My example B</a></li>
<li><a href="www.exampleC.com">My example C</a></li>
<li><a href="www.exampleD.com">My example D</a></li>

我已经设置了一个 JsFiddle，您可以在其中看到它确实添加一个输入，即使您添加节点也只放置了第一个输入

Answer 1

这就是我解决它的方式，基本上我必须为 2 个输入字段设置 2 个不同的变量

$('body').on('click', 'button.ul-appending', function() {
    $(this).parent().append(
    $('<ul class="main_ul">').addClass('newul sortable').append(
    $('<li><input placeholder="Link title" class="nome_link form-control" type="text"><input placeholder="Link" class="form-control link_url" type="text"></li>')
    )
    );
});
function ul(indent) {
    indent = indent || 4;
  var node = $(this);
    return node.removeAttr('class').children().map(function() {
    var self = $(this);
    var value = self.find('> .nome_link').val();
    var valueB = self.find('> .link_url').val();
    var sub_ul = self.find('> ul');
    var ul_spaces = new Array(indent+4).join(' ');
    var li_spaces = new Array(indent).join(' ');
    if (sub_ul.length && ul) {
        return li_spaces + '<li>' + value + 'n' + ul_spaces +
          '<ul class="sortable">n' + ul.call(sub_ul, indent+8) + 'n' + ul_spaces + '<ul>n' +
          li_spaces + '</li>';
    } else {
        return li_spaces + '<li><a href="'+valueB+'">' + value + '</a></li>';
    }
  }).get().join('n');
}
function updateTree() {
   $("#mindMapData textarea").text('<ul>n' + $("#mindMap").clone().find('.main_ul').map(ul).get().join('n') + 'n</ul>');
}
$("#mindMap").on("DOMSubtreeModified", updateTree);
$("#mindMap").on('keyup', 'input', updateTree);