Внутри элемента - параметр из функции

Question

Есть функция - принимает 2 параметра: текст, элемент-тег(может быть любой тег) Как реализовать функцию так что бы переданный в него текст, первым параметром, поместить внутрь второго параметра, то есть в тег - грубо говоря так:

function(text, element) {
  text внутри element
}

Answer 1

Можно так, если учитывать специальные теги:

const specialTags = {
  html: 'http://www.w3.org/1999/xhtml',
  svg: 'http://www.w3.org/2000/svg',
  mathml: 'http://www.w3.org/1998/Math/MathML',
};

const createTagWithText = (text, tag) => {
  const tagName = tag.toLowerCase();
  let el = null;
  
  if (specialTags[tagName]) el = document.createElementNS(specialTags[tagName], tagName);
  else el = document.createElement(tagName);
  
  el.innerHTML = text;
  
  return el;
}

const div = createTagWithText('Text div', 'div');
const span = createTagWithText('Text span', 'span');
const p = createTagWithText('Text p', 'p');
const html = createTagWithText('Text html', 'html');

document.body.append(div, span, p, html);

Там ещё есть специальные теги XUL и XBL, но если я правильно понял, то их не используют

Answer 2

const WrapTextToTag = (text, Tag) => {
  if(typeof tag === 'string') return `<${Tag}>${text}</${Tag}>`
  else return <Tag>{text}</Tag>
}

const Wrapper = ({ children }) => <h1>{children}</h1>

const MyComponent = () => {
  return <div>
    {WrapTextToTag('Hello world!', 'span')} {/* <span>Hello world!</span> */}
    {WrapTextToTag('Hello world!', Wrapper)} {/* <h1>Hello world!</h1> */}
  </div>
}

БЛОГ НА HUSL

Внутри элемента - параметр из функции

Ответы (2 шт):