How to add <ul> with <a> link into a textarea as simple text?

Question

I would like to be able to add links with an <a> tag based on user input.

HTML

<div id="linkRef">
  <button type="button" class="btn btn-default link-list">Aggiungi un link</button>
  <ul class="main_ul">
  </ul>
</div>

<div id="linkData">
  <textarea></textarea>
</div>

JS

$('body').on('click', 'button.link-list', function() {
  $("#linkRef").on("DOMSubtreeModified", updateTree);
  $('.main_ul').append(
    $('<li><div class="form-group"><input  placeholder="Dai un nome al link...." class="link_name form-control" type="text"></div><div class="form-group"><input placeholder="inserisci il link..." class="form-control" type="text"></div></li>')
  );
});

function updateTree() {
   var myLinks = $("#linkRef ul");
   $("#linkData textarea").val(myLinks.html() + "\n");
 }

$("#linkRef").on("DOMSubtreeModified", updateTree);
$("#linkRef").on('keyup', '.form-group input', updateTree);

The above inserts the added list but it inserts the inputs and buttons and all the html in it too, yet not the actual values, i didn't insert the <a> code as i was trying to work out the basic first.

The output within the textarea that I am expecting would be:

<ul>
   <li>
     <a href="www.example.com">Example</a>
   </li>
   <li>
     <a href="www.example2.com">Example2</a>
   </li>
</ul>

I made a JsFiddle playground

And this is another JsFiddle for another case I had and I was trying to work this new question out based on that but i didn't manage it

Answer 1

This is how I resolved it:

<div id="myList">
  <ul>
    <li><button class="btn btn-default ul-appending">+ Node</button>      </li>
  </ul>
</div>

<div id="listData">
  <textarea col="10" rows="10"></textarea>
</div>


$('body').on('click', 'button.ul-appending', function() {
    $(this).parent().append(
    $('<ul class="main_ul">').addClass('newul sortable').append(
    $('<li><div class="form-group"><input placeholder="Link title" class="nome_link form-control" type="text"></div><div class="form-group"><input placeholder="Link" class="form-control link_url" type="text"></div></li>')
    )
    );
});

$('body').on('click', 'button.removeThis', function() {
    $(this).parent().parent().parent().remove();
});

function updateTree() {
   $("#listData textarea").text('<li><a href="' + $("#myList input.link_url").val() + '">' + $("#myList input.nome_link").val() + '</a></li>');
 }

$("#myList").on("DOMSubtreeModified", updateTree);
$("#myList").on('keyup', 'input', updateTree);

JsFiddle

Answer 2

I think your html is look like this according to your requirments

 <div id="linkRef">
 <button type="button" class="btn btn-default link-list">Aggiungi un link</button>
 <span class="main_ul">
 </span>
 </div>

<div id="linkData">
<textarea></textarea>
</div>

and js is like below to setup textarea

  $('body').on('click', 'button.link-list', function() {
  $("#linkRef").on("DOMSubtreeModified", updateTree);
  $('.main_ul').append(
  $('<ul><li><a href="www.example.com">Example</a></li><li><a href="www.example2.com">Example2</a></li></ul>')
 );
});

  function updateTree() {
  var myLinks = $("#linkRef span");
 $("#linkData textarea").val(myLinks.html() + "\n");
 }

 $("#linkRef").on("DOMSubtreeModified", updateTree);
  $("#linkRef").on('keyup', '.form-group input', updateTree);

Answer 3

$('body').on('click', 'button.link-list', function() {
	$("#linkRef").on("DOMSubtreeModified", updateTree);
  $('.main_ul').append(
    $('<li><div class="form-group"><input  placeholder="Dai un nome al link...." class="link_name form-control" type="text"></div><div class="form-group"><input placeholder="inserisci il link..." class="inser_link form-control" type="text"></div></li>')
    );
});

function updateTree() {
		var myLinks = $("#linkRef ul li .link_name");
		var myinserLinks = $("#linkRef ul li .inser_link");
   $("#linkData textarea").val(myLinks.val() + "\n" + myinserLinks.val());
 }

$("#linkRef").on("DOMSubtreeModified", updateTree);
$("#linkRef").on('keyup', '.form-group input', updateTree);

textarea {
  width: 500px;
  height: 300px;
}

input {
  width: 400px;
  height: 40px;
  margin-bottom: 10px;
}

.margin-top-20 {
  margin-top: 20px;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div id="linkRef">
  <button type="button" class="btn btn-default link-list">Aggiungi un link</button>
  <ul class="main_ul">
  </ul>
</div>

<div id="linkData">
  <textarea></textarea>
</div>

Answer 4

as far as i know you cannot add HTML to a textarea

instead you could use an editable div ( that behaves like a textarea )

example : <div class="texthere" contenteditable="true"></div>

and also use outerHtml so you get also the <ul></ul>

plus. i don't see any a in your .main ul html ( ?? )

see jsfiddle or snippet below

$('body').on('click', 'button.link-list', function() {
	$("#linkRef").on("DOMSubtreeModified", updateTree);
  $('.main_ul').append(
    $('<li><div class="form-group"><input  placeholder="Dai un nome al link...." class="link_name form-control" type="text"></div><div class="form-group"><input placeholder="inserisci il link..." class="form-control" type="text"></div></li>')
    );
});

function updateTree() {
		var myLinks = $("#linkRef ul");
   $("#linkData .texthere").html(myLinks.prop("outerHTML") + "\n");
 }

$("#linkRef").on("DOMSubtreeModified", updateTree);
$("#linkRef").on('keyup', '.form-group input', updateTree);

textarea {
  width: 500px;
  height: 300px;
}

input {
  width: 400px;
  height: 40px;
  margin-bottom: 10px;
}

.margin-top-20 {
  margin-top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="linkRef">
  <button type="button" class="btn btn-default link-list">Aggiungi un link</button>
  <ul class="main_ul">
  </ul>
</div>

<div id="linkData">

<div class="texthere" contenteditable="true"></div>

</div>