1

Хотелось бы узнать для самообразования можно ли следующий код:

Car.prototype.draw = function () {
  let carHtml = `<img src="http://nostarch.com/images/car.png">`;

  this.carElement = $(carHtml);

  this.carElement.css({
    position: "absolute",
    left: this.x,
    top: this.y
  });

  $("body").append(this.carElement);
};

Написать на нативном JS. В частности не понимаю как на нативном реализовать этот участок кода: this.carElement = $(carHtml);

3 ответа 3

4

Всё, что существует на jQuery - можно написать на "чистом" JS

Car.prototype.draw = function () {
  let carHtml = `<img src="http://nostarch.com/images/car.png">`;

  this.carElement = createElementFromHTML( carHtml );

  this.carElement.style.cssText = `position: "absolute";
                                   left: ${ this.x };
                                   top: ${ this.y };` 
              // Если это просто число, ${ this.y }px;`

  document.body.appendChild(this.carElement);
};

function createElementFromHTML(str){
  var div = document.createElement('div');
  div.innerHTML = str;
  return div.children[0];
}
0
3

У меня получилось реализовать на нативном JS, по крайней мере, результат тот же:

Car.prototype.draw = function () {
  let x = this.x,
      y = this.y;

  this.carElement = document.createElement("img");
  this.carElement.setAttribute("src","http://nostarch.com/images/car.png");
  this.carElement.style.cssText = `
    position: absolute;
    left: ${x}px;
    top: ${y}px;
  `

  document.body.appendChild(this.carElement);
};
-1

Конечно. JQuery как раз на js и написан.

Для поиска элементов у объекта document есть набор функций таких как getElementById, getElementsByClassName, getElementsByName, getElementsByTagName.

Атрибут можно изменить при помощи element.setAttribute

Добавлять элементы к документу можно, например, при помощи element.appendChild

2
  • Я знаю, но не понимаю как можно реализовать данный выше код на нативном JS.
    – Problemon
    28 авг 2019 в 22:19
  • Ну, будет немного мороки. Если в лоб, то: надо распарсить полученную строку, найти на странице указанный в строке элемент, точнее список элементов. Пройтись по этому списку, сверяя теги и в итоге отобрать нужный.
    – Sheridan
    28 авг 2019 в 22:22

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.