Move an input with Jquery after setting as a variable

[Adamhumbug]

Hi,

I am trying to move an element with JQ.

I am wanting to add the input box to some appended content to a page.

My code is below:

		$("[id^='OPRow']").each(function(index, value){
			var fn = $("[id^='op_firstname']", this)
			console.log(fn)
			var ln = $("[id^='op_lastname']", this)
			var nation = $("[id^='op_nationality']", this)
			var mobile = $("input [id^='op_t1']", this)
			var cc = $("select [id^='op_t1d']", this)
			var role = $("[id^='op_role']", this)
			var e1 = $("select [id^='op_e1']", this)
			var cc = $("select [id^='op_t1d']", this)

			$('.content').append("<div class='row'><div class='col-6'><label for='basic-url'>Your vanity URL</label><div class='input-group mb-3'>"+fn+"</div></div><div class='col-6'><label for='basic-url'>Your vanity URL</label><div class='input-group mb-3'><input type='text' class='form-control' id='basic-url'></div></div></div><div class='row'><div class='col-4'><label for='basic-url'>Your vanity URL</label><div class='input-group mb-3'><input type='text' class='form-control' id='basic-url'></div></div><div class='col-4'><label for='basic-url'>Your vanity URL</label><div class='input-group mb-3'><input type='text' class='form-control' id='basic-url'></div></div><div class='col-4'><label for='basic-url'>Your vanity URL</label><div class='input-group mb-3'><input type='text' class='form-control' id='basic-url'></div></div></div><div class='row'><div class='col-4'><label for='basic-url'>Your vanity URL</label><div class='input-group mb-3'><input type='text' class='form-control' id='basic-url'></div></div><div class='col-4'><label for='basic-url'>Your vanity URL</label><div class='input-group mb-3'><input type='text' class='form-control' id='basic-url'></div></div><div class='col-4'><label for='basic-url'>Your vanity URL</label><div class='input-group mb-3'><input type='text' class='form-control' id='basic-url'></div></div></div>")


		})

The output i am getting is [object Object] where the element should be placed.

I would appreciate any help with this trying to put the input into the content that gets append to $('.content')

[requinix]

You can't mix HTML strings and HTML elements together like that.

Construct the HTML as a string if you wish, if that's easier to do, but you'll have to .append fn and whatever into it separately. For example,

var row = $("<div class='row'>...</div>");
row.find("label[for='basic-url'] + div").append(fn);

$(".content").append(row);

 

[Adamhumbug]

Perfect, thanks so much, that really helped.  Has led me into another issue however (another thread).  Unrelated to this answer which is perfect.