Ошибка говорит, что мне не хватает скобки. Однако синтаксис идентичен w3Schools и Mozilla. .css() работает, если я устанавливаю только один стиль, но ломается при установке более 1.
jQuery
<script>
$(document).ready( function(){
// event-handler to create new element
function createContainer() {
// variables store values from <select> element
var elementType = $('select').val();
// string containing markup for use with .append()
var elementTypeStr = $(` <${elementType}> This is a ${elementType} </${elementType}> `);
// this throws error, while setting single style doesn't
$('#layout_demo').append( elementTypeStr );
elementTypeStr.css("background-color":" blue" , "height": "100px");
} // end createContainer()
// ---------------------------- event handlers ---------------------
$('#btn').click( createContainer );
// button to delete latest element or selected element
}); // end ready
</script>
HTML:
<section id = "form">
<!-- select element --->
<label for = "container"> Please select type of container to add</label>
<select id= "container">
<option value= "div" > <div> </option>
<option value= "p"> <p> </option>
<option value= "section"> <section> </option>
</select>
<!-- Seperate container to hold now elements -->
<button id = "btn" > Create Container </button>
</section>
<div id = "layout_demo">
</div>



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


При использовании .css() у вас есть два варианта передачи аргументов: строки, разделенные запятыми, или Буквенное обозначение объекта.
следовательно:
.css("background-color", " blue").css("height", "100px");
или скорее:
.css({backgroundColor:"blue" , height:"100px"});
Кроме того, вместо использования $('select').val(); используйте более строгий селектор, например какой-нибудь идентификатор; 'select' может быть любым выбором на вашей странице.
jQuery($ => {
const createElement = () => {
const tagName = $('#element').val();
return $(`<${tagName}/>`, {
appendTo: '#layout',
text: `This is a ${tagName}`,
css: {
backgroundColor: "blue",
height: "100px"
},
});
}
$('#create').on('click', createElement);
});<section id = "form">
<label>
Please select type of container to add
<select id = "element">
<option value = "div"><div></option>
<option value = "p"><p></option>
<option value = "section"><section></option>
</select>
</label>
<button id = "create">Create Container</button>
</section>
<div id = "layout"></div>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Несколько свойств .css() должны находиться внутри объекта.
$(document).ready(function() {
// event-handler to create new element
function createContainer() {
// variables store values from <select> element
var elementType = $('select').val();
// string containing markup for use with .append()
var elementTypeStr = $(` <${elementType}> This is a ${elementType} </${elementType}> `);
// this throws error, while setting single style doesn't
$('#layout_demo').append(elementTypeStr);
elementTypeStr.css({
"background-color": " blue",
"height": "100px"
});
} // end createContainer()
// ---------------------------- event handlers ---------------------
$('#btn').click(createContainer);
// button to delete latest element or selected element
}); // end ready<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id = "form">
<!-- select element --->
<label for = "container"> Please select type of container to add</label>
<select id = "container">
<option value = "div"> <div> </option>
<option value = "p"> <p> </option>
<option value = "section"> <section> </option>
</select>
<!-- Seperate container to hold now elements -->
<button id = "btn"> Create Container </button>
</section>
<div id = "layout_demo">
</div>
Исправлена недостающая скобка @CristianOrmazábal.