Javascript-форум - проверка и добавление элемента в тег

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - проверка и добавление элемента в тег (https://javascript.ru/forum/jquery/74737-proverka-i-dobavlenie-ehlementa-v-teg.html)

проверка и добавление элемента в тег

Дана таблица, при нажатие на ячейку которой добавляется крестик, потом нолик и так по очереди. Нужно сделать проверку на символ в ячейке и если там пусто добавить крестик или нолик. Заранее спасибо

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

</body>

<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript" src="rough.js"></script>
<script type="text/javascript" src="script.js"></script>
</html>

$(document).ready(function($) {
	var strok = 3,
	stolbov = 3;

	$("body").append("<table class='field'></table>");

	for (var i = 0; i < strok; i++) {
   	$("<tr>").appendTo(".field"); 
   		for (var j = 0; j < stolbov; j++) {
   		$("<td></td>").appendTo(".field").addClass('cell'+i+j);
   		}
	}
	$("td").click(function(){
		var target = $(this);
	if (target.is(".can")) {
		alert('занято');
	}
	else{
	$(this).append("<canvas id='can' width='100' height='100'>");
 	const rc1 = rough.canvas(document.getElementById('can'));
	rc1.circle(50, 50, 90);
	}
	});

});



/* крестик
	const rc = rough.canvas(document.getElementById('can1'));
	rc.line(0, 0, 50, 50);
	rc.line(50, 0, 0, 50);


*/

[CODE]td {
	border: 1px solid black;
	width: 100px;
	height: 100px;
}
.field{
	margin-left: auto;
	margin-right: auto;
}

canvas{
	display: block;
}[/CODE]

canvas крестики нолики rough

Retro_1477,
делайте полноценные макеты, а не конструктор!!!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
td {
    border: 1px solid black;
    width: 100px;
    height: 100px;
}
.field{
    margin-left: auto;
    margin-right: auto;
}

canvas{
    display: block;
}
.can{
    background-color: #FFFACD;
}

</style>
</head>
<body>

</body>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/rough.js/2.2.5/rough.min.js"></script>
<script>
$(function() {
    var strok = 3,
        stolbov = 3,
        table = $("<table class='field'></table>").appendTo("body"),
        n = 1;
    for (var i = 0; i < strok; i++) {
        var tr = $("<tr>").appendTo(table);
        for (var j = 0; j < stolbov; j++) $("<td>", {
            click: function() {
                if ($(this).is(".can")) return;
                $(this).addClass("can");
                var canvas = $("<canvas width='100' height='100'>").appendTo(this)[0];
                canvas = rough.canvas(canvas);
                if (++n % 2) canvas.circle(50, 50, 90);
                else {
                    canvas.line(0, 0, 100, 100);
                    canvas.line(100, 0, 0, 100)
                }
            }
        }).appendTo(tr)
    }
});
</script>
</html>

Хорошо)
Спасибо за помощь